UPDATE
According to Angular 2 Docs change-log
All mention of moduleId removed. “Component relative paths” cookbook
deleted (2017-03-13)We added a new SystemJS plugin (systemjs-angular-loader.js) to our
recommended SystemJS configuration. This plugin dynamically converts
“component-relative” paths in templateUrl and styleUrls to “absolute
paths” for you.We strongly encourage you to only write component-relative paths. That
is the only form of URL discussed in these docs. You no longer need to
write @Component({ moduleId: module.id }), nor should you.
angular quickstart
meta: {
'./*.js': {
loader: 'systemjs-angular-loader.js'
}
}
https://github.com/angular/quickstart/blob/master/src/systemjs.config.js#L34-L38
angular-cli
changelog 1.0.0-rc.4 (2017-03-20)
To align with @angular/core behavior, all templateUrl and styleUrls
are now treated as relative – developers should use the ./foo.html
form in all cases.
See also
- https://www.bennadel.com/blog/3241-relative-template-and-style-urls-using-system-js-without-moduleid-in-angular-2-4-9.htm
PREVIOUS VERSION
By default, you should specify the full path back to the application root.
It is absolute with respect to the application root.
For your case it may be:
@Component({
selector: 'cwf',
templateUrl: 'app/app.template.html' // or src
})
export class AppComponent {}
If you want to specify template and style URLs relative to their component class files you should set moduleId property to decorator of your component:
@Component({
moduleId: module.id
selector: 'cwf',
templateUrl: './app.template.html'
})
export class AppComponent {}
If you use SystemJS, then it should be __moduleName variable instead of the module.id variable:
@Component({
moduleId: __moduleName,
selector: 'cwf',
templateUrl: './app.template.html'
})
export class AppComponent {}
See also more details:
- https://angular.io/docs/ts/latest/cookbook/component-relative-paths.html
- http://blog.thoughtram.io/angular/2016/06/08/component-relative-paths-in-angular-2.html