[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 { }