Sandip Kumar Sharma Sandip Kumar Sharma - 1 year ago 183
AngularJS Question

Angular 2. Rendering template I have removed from templateUrl

Hi I am really new to angular 2.

Issue is I am implemented Routing which is working fine but then on New_Contact route I replaced templateUrl with template but it is still loading old html file for that route

OLD Component


selector :'new-contact',
templateUrl :'app/ts/html/new_contact_form.html'


selector :'new-contact',
template :'Blah'

But that route still rendering old templateUrl.

Main.ts file where route mentioned is

import { bootstrap } from 'angular2/platform/browser';
import { Component, provide } from 'angular2/core';
import { ROUTER_PROVIDERS, RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import { NavbarComponent } from './navbar.component';
import { ContactDisplayComponent } from './contact_display.component';
import { NewContact } from './new_contact.component';
import { EditContact } from './edit_contact.component';

directives : [NavbarComponent,ROUTER_DIRECTIVES]


export class Main{


Navbar Component where router link is placed

import { Component } from 'angular2/core';
import { ROUTER_DIRECTIVES } from 'angular2/router';

selector :'navbar',
styleUrls : ['../resources/navbar_support.css'],

export class NavbarComponent


<div id="custom-bootstrap-menu" class="navbar navbar-fixed navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="pull-left" href="#">
<img src="../resources/phonebook_brand.png" class="img-responsive"/>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
<div class="collapse navbar-collapse navbar-menubuilder">
<ul class="nav navbar-nav navbar-right">
<li><a [routerLink]="['Home']">Home</a>
<li><a [routerLink]="['New_Contact']">New</a>

Below is the link to complete code, if any one of you can have a look just do npm install and npm start and we are good to go

I have also included underscore library using npm install for computaion

Answer Source

There was a problem in your tsconfig.json file preventing from compiling your TypeScript files. The path /app/js isn't correct in this file. See the error:

[0] error TS5033: Could not write file '/app/js/new_contact.component.js': EACCES: permission denied, mkdir '/app'
[0] error TS5033: Could not write file '/app/js/': EACCES: permission denied, mkdir '/app'

You should use the path app/js instead. Here is the udpate to do:

  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "outDir": "app/js", // <--------------
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  "exclude": [

Your JS file remained the same since your update wasn't compiled and taken into account within your appliction in the browser...

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download