Relative paths for templates and css in angular2

Owned by Genhan Chen
Last updated: Oct 20, 2016
1 min read

Problem

The relative paths do not work in @Component. For example:

@Component({
    selector: 'datepicker-popup',
    directives: [],
    providers: [],
    templateUrl: './datepicker.comp.html',
    styleUrls: ['./datepicker.css']
})

The templateUrl and styleUrls will not point to their relative locations.

Solution

For Angular2 Beta version:

My app is using SystemJS, so the solution is adding moduleId: __moduleName in the Component decorator.

The solution to the above example:

@Component({
    selector: 'datepicker-popup',
    moduleId: __moduleName,
	directives: [],
    providers: [],
    templateUrl: './datepicker.comp.html',
    styleUrls: ['./datepicker.css']
})

Here is my tsconfig.json:

{
	"compilerOptions": {
		"target": "es5",
		"module": "system",
		"moduleResolution": "node",
		"sourceMap": true,
		"emitDecoratorMetadata": true,
		"experimentalDecorators": true,
		"removeComments": true,
		"noImplicitAny": false
	},
	"exclude": ["node_modules"]
}

The module has been set as system.

Here is the updated solution for AngularJS 2 RC:

@Component({
    selector: 'datepicker-popup',
    moduleId: module.id,
    providers: [],
    templateUrl: './datepicker.comp.html',
    styleUrls: ['./datepicker.css']
})
tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": true,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
}


http://blog.thoughtram.io/angular/2016/06/08/component-relative-paths-in-angular-2.html