Sandip Kumar Sharma Sandip Kumar Sharma - 6 months ago 76
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

new_contact.component.ts


@Component({
selector :'new-contact',
templateUrl :'app/ts/html/new_contact_form.html'
})


CURRENT COMPONent

@Component({
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';



@Component({
selector:'app-start',
template:`
<navbar></navbar>
<router-outlet></router-outlet>
`,
directives : [NavbarComponent,ROUTER_DIRECTIVES]
})

@RouteConfig([
{path:'/',name:'Home',component:ContactDisplayComponent},
{path:'/New_Contact',name:'New_Contact',component:NewContact},
{path:'/Edit_Contact/:id',name:'Edit_Contact',component:EditContact}
])

export class Main{
}

bootstrap(Main,
[
ROUTER_PROVIDERS
]
);


Navbar Component where router link is placed

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


@Component({
selector :'navbar',
templateUrl:'/app/ts/html/navbar.html',
styleUrls : ['../resources/navbar_support.css'],
directives:[ROUTER_DIRECTIVES]
})


export class NavbarComponent
{}


NAVBAR.HTML

<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"/>
</a>
<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>
</button>
</div>
<div class="collapse navbar-collapse navbar-menubuilder">
<ul class="nav navbar-nav navbar-right">
<li><a [routerLink]="['Home']">Home</a>
</li>
<li><a [routerLink]="['New_Contact']">New</a>
</li>
</ul>
</div>
</div>
</div>


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

https://www.dropbox.com/s/hpuqg8lhtu4wb42/Routing%201%20test.rar?dl=0

I have also included underscore library using npm install for computaion

Answer

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/new_contact.component.js.map': 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": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

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

Comments