Run angular2 application using F5 or CTRL F5 from visual studio

Writing angular2 code on visual studio is intuitive especially with the help of code completion and ability to write your web api that connect to backend at ease while using visual studio.

I have seen a lot of developer who always want to run there angular2 codes using F5 so as to debug it just like you do when running C# code in visual studio but could not work their way around it.

In this example here, I will be giving tips on how to go about this after you setup your visual studio with angular2 quick starter template and its available in GitHub for download as a zip files or cloning to your local system.

Let’s get started.

If we run the application from visual studio, using F5(Start Debugging) or CTRL + F5(Start without debugging) we get the message “Loading AppComponent content here ...” but nothing seems to appear on the screen. That all the messages you will get, of which beyond your thought you are expecting to get a message that says “Hello Angular” which resides inside app.component.ts of the quick starter file you obtained from GitHub.

To be able to run this application using F5(Start Debugging) or CTRL + F5(Start without debugging) we need to make some changes to the file structures of the quick starter files we obtained.

Follow these steps below.

1. Launch browser developer tools of your favorite browser you are using to run the application from visual studio. I use google chrome preferably (you can also use this, to be able to repeat the error I am getting), you can do this by pressing F12.

After pressing F12, click on the console tab Looking at the screen you will notice lots of response with “Failed to load resource: the server responded with a status of 404 (Not Found)” for different files with main.js been ontop of the list (main.js is the entry point for your angular application).

These files listed as errors can be found in the “src” folder of your angular application. To fix all the “404 not found errors” navigate to index.html file, change the

<base href=”/”> to <base href=”/src/”>

2. Save changes to the index.html file and reload the page. At this junction we get different errors for the following files below.

These files can be found in the index.html files in the head section of the html tag.

<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>

Lets fix these errors. Go to the index.html file and make changes to the above script to what is below.

<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>

Last but not the least, in systemjs.config.js file, change

'npm:': 'node_modules/' to 'npm:': '/node_modules/'

Reload the web page, and you will see “Hello Angular” message displayed on the browser without any errors.

NB: You might encounter this error below after making all these changes and reloading the web page when you click F12 if nothing happened after all the changes.

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)

Solution: To fix this error, all you need to do is delete browser cache after all changes you made in visual studio, then run using F5 or CTRL F5.

There are important things to note, you will not be able to run the application using “npm start” command.

More also an issue will surface, let me introduce you to this issue.

 Navigate to your application in visual studio and Expand "app" folder. This folder is inside "src" folder
 Open "app.component.ts" file

	Set name="Welcome to my first running angular2 with F5 in VS" from name="Angular"

 Save the changes and reload the web page
 Notice, we do not see the changes on the web page
 But, if we run the application using F5 or CTRL+F5 from visual studio we see the changes in the browser.

To understand this issue at hand let me explain some concept to you.
Different languages can be used with angular2 to develop it. Below is the language of choice.
 Typescript
 Dart
 PureScript
 Elm
 ECMAScript5
 ECMAScript 6(also called ES2015)

But the most preferred by many developers is typescript. Back to the source of the issue. We are using typescript as base language for our development which is not compiled to javascript when we save the file and this is the reason we did not see any changes in the web browser, but we are able to run the application using F5 or CTRL F5 from visual studio at this moment Typescript is complied to javascript and we are able to see the changes.

Work Around:
To enable visual studio to compile Typescript to javascript when the changes are saved, we need to set a feature ON in the tsconfig.json file. This file resides in the “src” folder of our application. Below we have set "compileOnSave" to true, this allow changes to take effect in the web browser without needing to do F5 or CTRL F5 in visual studio to see changes and its because typescript is automatically complied to javascript when the file is saved.

{
  "compileOnSave": true,
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}