Text version of the video
Angular 2 Tutorial playlist
Angular 2 Text articles and slides
All Dot Net and SQL Server Tutorials in English
All Dot Net and SQL Server Tutorials in Arabic
In this video we will discuss how to run angular 2 application from visual studio using F5 or CTRL + F5.
This is continuation to Part 2. Please watch Part 2 from Angular 2 tutorial before proceeding.
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.
All these files are present in "src" folder. So to fix these "404 Not Found" errors, in index.html file, change [base href="/"] to [base href="/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.
To fix these errors, in index.html change the above script references as shown below. Notice, we have included "/" just before node_modules
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" folder
2. 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 page
6. 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?
"lib": [ "es2015", "dom" ],
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.
Another question that lot of you have asked which is unrelated to this video is - Should I learn AngularJS1 before learning Angular 2. The answer is "NO". Angular 2 is completely rewritten and very different from AngularJS1, so there is no need to learn AngularJS 1 before learning Angular 2.