At the moment, if we run the application from Visual Studio, using F5 or CTRL+F5, we get the message "Loading AppComponent content here ..." but nothing happens beyond that. To be able to run the application using F5 or CTRL+F5 we need to make the following changes.

1. Launch browser developers tools by pressing F12. Notice we have "404 Not Found" errors for the following files.

styles.css

systemjs.config.js

main.js

All these files are present in "src" folder. So to fix these "404 Not Found" errors, in index.html file, change <basehref="/"> to <basehref="/src/">

2. Save the changes and reload the page. At this point we get another set of "404 Not Found" errors for the following files.

shim.min.js

zone.js

system.src.js

<scriptsrc="node_modules/core-js/client/shim.min.js"></script>

<scriptsrc="node_modules/zone.js/dist/zone.js"></script>

<scriptsrc="node_modules/systemjs/dist/system.src.js"></script>

To fix these errors, in index.html change the above script references as shown below. Notice, we have included "/" just before node_modules

<scriptsrc="/node_modules/core-js/client/shim.min.js"></script>

<scriptsrc="/node_modules/zone.js/dist/zone.js"></script>

<scriptsrc="/node_modules/systemjs/dist/system.src.js"></script>

Also in systemjs.config.js file, CHANGE

'npm:': 'node_modules/' TO 'npm:': '/node_modules/'

At this point reload the page and you will see "Hello Angular" message without any errors.

One important point to keep in mind is that, now we will not be able to run the application using "npm start" command.

We still have one more issue. Let us first understand the issue.1. Expand "app" folder. This folder is inside "src" folder2. Open "app.component.ts" file 3. Set name="Angular 2!" from name="Angular"4. Save the changes and reload the web page 5. Notice, we do not see the changes on the web page6. However, if we run the application by pressing F5 or CTRL+F5 from visual studio we see the changes in the browser.

So what is the issue?TypeScript is not complied to JavaScript when we save the file and this the reason we do not see the changes in the browser. However, when we run the application by pressing F5 or CTRL+F5 from visual studio TypeScript is compiled to JavaScript and we see the changes.

If you want Visual Studio to compile TypeScript to JavaScript when the changes are saved, we need to turn this feature "ON" by including the following setting in tsconfig.json file. You will find this file in "src" folder. Notice we have set "compileOnSave" to true. With this change tsconfig.json file looks as shown below.

{

"compileOnSave": true,

"compilerOptions": {

"target": "es5",

"module": "commonjs",

"moduleResolution": "node",

"sourceMap": true,

"emitDecoratorMetadata": true,

"experimentalDecorators": true,

"lib": [ "es2015", "dom" ],

"noImplicitAny": true,

"suppressImplicitAnyIndexErrors": true

}

}

At this point TypeScript is automatically compiled to JavaScript when the file is saved, so the changes are reflected in the browser when the page is reloaded.

At the moment, we are using Visual Studio built-in IIS express server. In a later video in this course we will discuss how to use full blown IIS instead of Visual Studi built-in IIS express.

Should I learn AngularJS1 before learning Angular 2?NO, Angular 2 is completely rewritten and very different from AngularJS1, so there is no need to learn AngularJS 1 before learning Angular 2.

If I use ASP target framework 4.6.1, I get the same error message as Anoop and Anonymous. I changed the target framework to 4.5.2 and it worked! I don't know id this works on 4.6.1 and later. If anyone knows, please let us know!

Hello Sir, While I am running application using command window it works perfect. But when I try to run application using the Visual Studio I will get the forbidden error 403. Error Message Showing The Web server is configured to not list the contents of this directory.

Yes it does solve the build errors but showingHTTP Error 403.14 - ForbiddenThe Web server is configured to not list the contents of this directory.Most likely causes:A default document is not configured for the requested URL, and directory browsing is not enabled on the server.Things you can try:If you do not want to enable directory browsing, ensure that a default document is configured and that the file exists.Enable directory browsing. Go to the IIS Express install directory.Run appcmd set config /section:system.webServer/directoryBrowse /enabled:true to enable directory browsing at the server level.Run appcmd set config ["SITE_NAME"] /section:system.webServer/directoryBrowse /enabled:true to enable directory browsing at the site level.Verify that the configuration/system.webServer/directoryBrowse@enabled attribute is set to true in the site or application configuration file.Detailed Error Information:Module DirectoryListingModuleNotification ExecuteRequestHandlerHandler StaticFileError Code 0x00000000Requested URL http://localhost:21879/Physical Path c:\Angular2\Angular2Logon Method AnonymousLogon User AnonymousRequest Tracing Directory C:\Users\v-prkro\Documents\IISExpress\TraceLogFiles\ANGULAR2

More Information:This error occurs when a document is not specified in the URL, no default document is specified for the Web site or application, and directory listing is not enabled for the Web site or application. This setting may be disabled on purpose to secure the contents of the server. View more information »

I am using visual studio 2017 community version. I have done all changes as you suggest in video and my Index.html work fine if right click on page and select view in browser. but when I press F5 and run the project I am getting errors in console.

Can you please help. i did everything you specified to setup angular, which works great. when i use command prompt to start website using "npm start",its showing me browser is working fine.but when i click "ctrl+f5" its retrive Home/Index controller as i have used MVC framework.

When i change localhost:30002/src/index.htmlsystem says "No webpage was found for the web address: https://localhost:44368/src/index.html"