[Angular 2] Component relative paths

Oingial aritial---Link

Take away:

Import {Component, OnInit} from ' @angular/core '; @Component ({  selector   ' Contacts-header ',  './header.component.html ',  styleurls  : ['./header.component.css ']}) Export class Headercomponent implements OnInit {}

When you use ' Templateurl ' & ' Styleurls ', the path is relative to the application root.

So if you compoennt is put inside/src/app/header. Then the ' Templateurl: './header.component.html ' is refer to ' src/header.component.html ' and so would report 404 error.

To-the-solve the problem is introduce´moudleid:moudle.id '.

CommonJS:

Import {Component, OnInit} from ' @angular/core '; @Component ({  moduleId:module.id,    //  fully resolved filename; defined at module loadtime  selector: ' Contacts-header ',  ' Header.component.html ',  styleurls: [' Header.component.css ']}) Export class Headercomponent Implements OnInit {}

// Tsconfig.json {  "compileroptions": {    "module": "Commonjs",    "target": "ES5"  }} 

SYSTEMJS:

Import {Component, OnInit} from ' @angular/core '; @Component ({  moduleid: __modulename,     //  fully resolved filename; defined at module loadtime  selector: ' Contacts-header ' ,  ' Header.component.html ',  styleurls: [' Header.component.css ']}) Export class Headercomponent Implements OnInit {}

JSPM:

//If We decide to use JSPM, we use the Typescriptoptions configuration format in the Config.js file:Systemjs.config ({typescriptoptions: {module:"Commonjs", Emitdecoratormetadata:true, Experimentaldecorators:true}, Transpiler:false, BaseURL:"/dist", Map: {app:' SRC ', Typescript:' Node_modules/typescript/lib/typescript.js ', Angular2:' Node_modules/angular2 ', RXJS:' Node_modules/rxjs '}, Packages: {app: {defaultextension:' TS ', Main:' App.ts '}, Angular2: {defaultextension:' JS '}, Rxjs: {defaultextension:' JS '    }  }});

Webpack:

// require  ' @angular/core '; @Component ({  ' My-app ',  template:require ('./ Header.component.html '),  styles: [Require ('./header.component.css ')]}) Export class Headercomponent implements OnInit {}

Or

// Import  ' @angular/core '; import {Component}  ' @angular/core './header.component.html '; Import HeaderStyle    './header.component.css '; @Component ({  ' My-app ',  Template: HeaderTemplate,  styles   : [HeaderStyle]}) Export class Headercomponent implements OnInit {}

[Angular 2] Component relative paths