Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

Run angular 2 app using f5 from visual studio


Suggested Videos

Part 1 - Introduction to Angular 2 | Text | Slides
Part 2 - Setting up Angular 2 in Visual Studio | Text | Slides

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.
  • styles.css
  • systemjs.config.js
  • main.js
angular 2 loading appcomponent content here

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.
  • shim.min.js
  • zone.js
  • system.src.js
angular 2 node_modules 404

<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="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

<script src="/node_modules/core-js/client/shim.min.js"></script>
<script src="/node_modules/zone.js/dist/zone.js"></script>
<script src="/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" 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?
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.


Angular 2 tutorial for beginners

34 comments:

  1. Hello Venkat,

    I have done all the changes specified by you still i am not able to run the solution properly i am this below error.

    node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js Failed to load resource: the server responded with a status of 404 (Not Found)


    index.html:18 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:51412/src/node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js
    Error: XHR error (404 Not Found)

    Please let me know what i am missing.


    ReplyDelete
    Replies
    1. Close Visual Studio, delete the solution folder and recreate the project from scratch by following the steps in Part 2 and Part 3 of this video series, and hopefully the error goes away.

      Delete
    2. Following change would fix the above error.

      systemjs.config.js file,
      'npm:': 'node_modules/' TO 'npm:': '/node_modules/'

      Deleting browser cache after this change fixed this error for me.

      Delete
    3. Yes This works for me if you are using VS2017

      Delete
  2. Hi Venkat,

    I have done all changes as per your guide but still I am not able to run my project with F5 error ,

    Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:52467/src/node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js
    Error: XHR error (404 Not Found) loading http://localhost:52467/src/node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js
    at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (http://localhost:52467/node_modules/zone.js/dist/zone.js:1055:39)
    at ZoneDelegate.invokeTask (http://localhost:52467/node_modules/zone.js/dist/zone.js:424:31)
    at Zone.runTask (http://localhost:52467/node_modules/zone.js/dist/zone.js:191:47)
    at XMLHttpRequest.ZoneTask.invoke (http://localhost:52467/node_modules/zone.js/dist/zone.js:486:38)
    Error loading http://localhost:52467/src/node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js as "@angular/platform-browser-dynamic" from http://localhost:52467/src/main.js
    at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (http://localhost:52467/node_modules/zone.js/dist/zone.js:1055:39)
    at ZoneDelegate.invokeTask (http://localhost:52467/node_modules/zone.js/dist/zone.js:424:31)
    at Zone.runTask (http://localhost:52467/node_modules/zone.js/dist/zone.js:191:47)
    at XMLHttpRequest.ZoneTask.invoke (http://localhost:52467/node_modules/zone.js/dist/zone.js:486:38)
    Error loading http://localhost:52467/src/node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js as "@angular/platform-browser-dynamic" from http://localhost:52467/src/main.js
    (anonymous) @ index.html:18
    ZoneDelegate.invoke @ zone.js:391
    Zone.run @ zone.js:141
    (anonymous) @ zone.js:817
    ZoneDelegate.invokeTask @ zone.js:424
    Zone.runTask @ zone.js:191
    drainMicroTaskQueue @ zone.js:584
    ZoneTask.invoke @ zone.js:490
    zone.js:2224 GET http://localhost:52467/src/node_modules/@angular/core/bundles/core.umd.js 404 (Not Found)
    scheduleTask @ zone.js:2224
    ZoneDelegate.scheduleTask @ zone.js:410
    Zone.scheduleTask @ zone.js:235
    Zone.scheduleMacroTask @ zone.js:258
    (anonymous) @ zone.js:2248
    proto.(anonymous function) @ zone.js:1425
    fetchTextFromURL @ system.src.js:1051
    (anonymous) @ system.src.js:1778
    ZoneAwarePromise @ zone.js:833
    (anonymous) @ system.src.js:1777
    (anonymous) @ system.src.js:2806
    (anonymous) @ system.src.js:3384
    (anonymous) @ system.src.js:3707
    (anonymous) @ system.src.js:4099
    (anonymous) @ system.src.js:4562
    (anonymous) @ system.src.js:4831
    (anonymous) @ system.src.js:407
    ZoneDelegate.invoke @ zone.js:391
    Zone.run @ zone.js:141
    (anonymous) @ zone.js:817
    ZoneDelegate.invokeTask @ zone.js:424
    Zone.runTask @ zone.js:191
    drainMicroTaskQueue @ zone.js:584
    ZoneTask.invoke @ zone.js:490
    zone.js:2224 GET http://localhost:52467/src/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js 404 (Not Found)
    scheduleTask @ zone.js:2224
    ZoneDelegate.scheduleTask @ zone.js:410
    Zone.scheduleTask @ zone.js:235
    Zone.scheduleMacroTask @ zone.js:258
    (anonymous) @ zone.js:2248
    proto.(anonymous function) @ zone.js:1425
    fetchTextFromURL @ system.src.js:1051
    (anonymous) @ system.src.js:1778
    ZoneAwarePromise @ zone.js:833
    (anonymous) @ system.src.js:1777
    (anonymous) @ system.src.js:2806
    (anonymous) @ system.src.js:3384
    (anonymous) @ system.src.js:3707
    (anonymous) @ system.src.js:4099
    (anonymous) @ system.src.js:4562
    (anonymous) @ system.src.js:4831
    (anonymous) @ system.src.js:407
    ZoneDelegate.invoke @ zone.js:391
    Zone.run @ zone.js:141
    (anonymous) @ zone.js:817
    ZoneDelegate.invokeTask @ zone.js:424
    Zone.runTask @ zone.js:191
    drainMicroTaskQueue @ zone.js:584
    ZoneTask.invoke @ zone.js:490

    ReplyDelete
    Replies
    1. Hi,
      if you open lite server . close it out first and reload the page,it works for me.
      angular gives preference to the lite server

      Delete
    2. Close Visual Studio, delete the solution folder and recreate the project from scratch by following the steps in Part 2 and Part 3 of this video series, and hopefully the error goes away.

      Delete
    3. Hi Venkat,
      Thanks my issue is fixed.

      Delete
    4. 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!

      Delete
    5. changing target framework worked as charm VS2017.Thanks Kumar.

      Delete
  3. I have the same problem with platform-browser-dynamic.umd.js. Please reply

    ReplyDelete
  4. How can i run angualr 2 using webpack in visual Studio (F5 key)

    ReplyDelete
  5. I changed the target framework to 4.6.1 and it works now. Sorry I stand corrected from my earlier post.

    ReplyDelete
  6. 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.

    ReplyDelete
    Replies
    1. Have you solved the issue? If yes, can you share how you have solved it? Thank you.

      Delete
    2. I have the same problem, I solved it by setting index.html page as start page.

      Delete
  7. Hi sir,i am getting this error in vs2017 community edition..
    Class 'Subject' incorrectly extends base class 'Observable Nativescript navigation drawer error

    ReplyDelete
  8. Severity Code Description Project File Line Suppression State
    Error TS2415 Class 'Subject' incorrectly extends base class 'Observable'.
    Types of property 'lift' are incompatible.
    Type '(operator: Operator) => Observable' is not assignable to type '(operator: Operator) => Observable'.
    Type 'Observable' is not assignable to type 'Observable'.
    Type 'T' is not assignable to type 'R'. src (tsconfig project) F:\New folder (2)\2Angular2Demo\2Angular2Demo\node_modules\rxjs\Subject.d.ts 16 Active

    ReplyDelete
    Replies
    1. comment this line
      //lift(operator: Operator): Observable;
      in Subject.d.ts file
      I hope this may solve the problem

      Delete
  9. {
    "compilerOptions": {
    "noStrictGenericChecks": true
    }
    }

    ReplyDelete
    Replies
    1. Yes it does solve the build errors but showing
      HTTP Error 403.14 - Forbidden
      The 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
         DirectoryListingModule
      Notification
         ExecuteRequestHandler
      Handler
         StaticFile
      Error Code
         0x00000000
      Requested URL
         http://localhost:21879/
      Physical Path
         c:\Angular2\Angular2
      Logon Method
         Anonymous
      Logon User
         Anonymous
      Request 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 »

      Delete
    2. where we use this code, having same error as unable to build the solution

      Delete
  10. Hi Sir I have posted the question that my project is not build ..
    So I got the solution as follows..
    In tsconfig.json, put it in "compilerOptions" and set it to true.

    {
    "compilerOptions": {
    "noStrictGenericChecks": true
    }
    }

    ReplyDelete
  11. Severity Code Description Project File Line Suppression State
    Error Build:Class 'Subject' incorrectly extends base class 'Observable'. Angular2demos d:\users\nikhil.gupta\documents\visual studio 2017\Projects\Angular2demos\Angular2demos\node_modules\rxjs\Subject.d.ts 16


    this is the error iam getting could u pl help me venkat

    ReplyDelete
    Replies
    1. Add Below :

      In tsconfig.json, put it in "compilerOptions" and set it to true.

      {
      "compilerOptions": {
      "noStrictGenericChecks": true
      }
      }
      Hopefully issue will get resolved.

      Delete
  12. hi venkat i got this error please heilp me

    Failed to load resource: the server responded with a status of 404 (Not Found)


    Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:62895/src/main.js
    Error: XHR error (404 Not Found) loading http://localhost:62895/src/main.js
    at XMLHttpRequest.wrapFn (http://localhost:62895/node_modules/zone.js/dist/zone.js:1166:39)
    at ZoneDelegate.invokeTask (http://localhost:62895/node_modules/zone.js/dist/zone.js:425:31)
    at Zone.runTask (http://localhost:62895/node_modules/zone.js/dist/zone.js:192:47)
    at ZoneTask.invokeTask [as invoke] (http://localhost:62895/node_modules/zone.js/dist/zone.js:499:34)
    at invokeTask (http://localhost:62895/node_modules/zone.js/dist/zone.js:1540:14)
    at XMLHttpRequest.globalZoneAwareCallback (http://localhost:62895/node_modules/zone.js/dist/zone.js:1566:17)
    Error loading http://localhost:62895/src/main.js
    at XMLHttpRequest.wrapFn (http://localhost:62895/node_modules/zone.js/dist/zone.js:1166:39)
    at ZoneDelegate.invokeTask (http://localhost:62895/node_modules/zone.js/dist/zone.js:425:31)
    at Zone.runTask (http://localhost:62895/node_modules/zone.js/dist/zone.js:192:47)
    at ZoneTask.invokeTask [as invoke] (http://localhost:62895/node_modules/zone.js/dist/zone.js:499:34)
    at invokeTask (http://localhost:62895/node_modules/zone.js/dist/zone.js:1540:14)
    at XMLHttpRequest.globalZoneAwareCallback (http://localhost:62895/node_modules/zone.js/dist/zone.js:1566:17)
    Error loading http://localhost:62895/src/main.js
    (anonymous) @ index.html:18

    ReplyDelete
    Replies
    1. Here is the Fix just run 'npm install --save rxjs@^5.4.2'

      Njoy

      https://stackoverflow.com/questions/44810195/how-do-i-get-around-this-subject-incorrectly-extends-observable-error-in-types

      Delete
  13. FYI to all.
    facing Rxjs error after upgrade ang 4.3..and
    Fix via below link.

    ReplyDelete
  14. Hello sir,

    I am facing some weird problem.

    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.

    I just don't understated what is going wrong.

    ReplyDelete
  15. Hello Sir, i am getting this error while running app as per your instruction
    .............................
    Severity Code Description Project File Line Suppression State
    Error Build:Property 'lift' in type 'Subject' is not assignable to the same property in base type 'Observable'. Angular2_Demo E:\Vikash\Angular2_Demo\Angular2_Demo\node_modules\rxjs\Subject.d.ts 24
    Error Build:Property 'lift' in type 'Subject' is not assignable to the same property in base type 'Observable'. Angular2_Demo E:\Vikash\Angular2_Demo\Angular2_Demo\node_modules\rxjs\Subject.d.ts 24
    Error TS2416 Property 'lift' in type 'Subject' is not assignable to the same property in base type 'Observable'.
    Type '(operator: Operator) => Observable' is not assignable to type '(operator: Operator) => Observable'.
    Type 'Observable' is not assignable to type 'Observable'.
    Type 'T' is not assignable to type 'R'. TypeScript Virtual Projects E:\Vikash\Angular2_Demo\Angular2_Demo\node_modules\rxjs\Subject.d.ts 24 Active

    ReplyDelete
  16. 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.html
    system says "No webpage was found for the web address: https://localhost:44368/src/index.html"

    any suggestion ?

    ReplyDelete
  17. Can we you both CLI and F5 Vs 2015. Can't get it to work

    ReplyDelete
  18. Hello Sir, I have added ""compileOnSave": true," statemant but changes not reflect automaticaly, after save the changes I need to refresh the page.

    ReplyDelete

It would be great if you can help share these free resources