Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

VS angular2 changes do not update on browser

I'm starting on Angular2 and when I try to run the first time my project, it works. The problem is that i'm following the tutorial and any change at all is not showing on any browser when i run it!

This is my "app.component.ts":

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<h1>Testing...</h1>'
})

export class AppComponent {
  title = 'Tour of Heroes';
}

this shows ok on any browser, but when i change to this:

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<h1>{{title}}</h1>'
})

export class AppComponent {
  title = 'Tour of Heroes';
}

it continues to show "Testing...". it suppose to show "Tour of Heroes". Why?

All my other files are the same as the tutorial!

Ps.: I have installed "node and npm"!

[@PankajParkar mentioned a need of editting "System.config"] This is what i have on my index.html as the same as in the tutorial on Angular2

<script>
    System.config({
      packages: {
        app: {
          format: 'register',
          defaultExtension: 'js'
        }
      }
    });
    System.import('app/main').then(null, console.error.bind(console));
  </script>
like image 749
Plinio Avatar asked Apr 16 '16 20:04

Plinio


1 Answers

This issue is so frustrating but this is how I made it work.

Hit F12 in your browser to bring up the Developer Tools. Disable the Cache as shown below

enter image description here

Secondly, I had to add this section just above tag in web.config to disable cache

<location path="app">
    <system.webServer>
      <staticContent>
        <clientCache cacheControlMode="DisableCache"/>
      </staticContent>
    </system.webServer>
</location>
like image 67
Ali Baig Avatar answered Sep 18 '22 15:09

Ali Baig