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