[Angular 2] Component relative paths

Oingial aritial --> Link

Take away:

import { Component, OnInit } from '@angular/core';

@Component({
selector   : 'contacts-header',
templateUrl: './header.component.html',
styleUrls  : ['./header.component.css']
})
export class HeaderComponent implements OnInit {
}

When you use `templateUrl` & `styleUrls`, the path are relative to the application root.

So if you compoennt is put inside /src/app/header. Then way `templateUrl: './header.component.html'` is refer to 'src/header.component.html', so will report 404 error.

To way to solve the problem is introduce ´moudleId: moudle.id`.

CommonJS way:

import { Component, OnInit } from '@angular/core';

@Component({
moduleId: module.id,    // fully resolved filename; defined at module load time
selector: 'contacts-header',
templateUrl: '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 load time
selector: 'contacts-header',
templateUrl: '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

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
template: require('./header.component.html'),
styles: [require('./header.component.css')]
})
export class HeaderComponent implements OnInit {
}

or

// import

import { Component } from '@angular/core';

import { Component }  from '@angular/core';
import headerTemplate from './header.component.html';
import headerStyle    from './header.component.css';

@Component({
selector : 'my-app',
template : headerTemplate,
styles   : [headerStyle]
})
export class HeaderComponent implements OnInit {
}