How do I use templateUrl and styleUrls in a Component?

[Matt Raible]

I've created a simple example app using https://github.com/mgechev/angular2-seed as a starter. angular2-seed uses TypeScript and now I'm trying to create a similar app that uses ES6 for comparison. In the TypeScript app, I'm able to the following:

@Component({
  selector: 'sd-search',
  moduleId: module.id,
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css'],
  directives: [FORM_DIRECTIVES, CORE_DIRECTIVES, ROUTER_DIRECTIVES]
})

However, if I do this in an app that uses angular2-es6-starter, there's a 404 on the templateUrl and styleUrls. I was able to workaround the template by importing it:

import template from './search.component.html';

@Component({
    selector: 'sd-search',
    moduleId: module.id,
    template: template,
    styleUrls: ['./search.component.css'],
    directives: [FORM_DIRECTIVES, CORE_DIRECTIVES, ROUTER_DIRECTIVES]
})

However, I'm not sure how to accomplish the same for the styleUrls property. How do I use templateUrl and styleUrls in a Component when using this project?

Thanks in advance.

[James Hall]

Hi Matt, wild guess is that you need to update localStaticPaths in server/config.js. But I am just starting to explore ts/es6 with angular2 myself.

[Gábor Soós]

@jamesmhall good point
The url has to be relative to the static path, will look at it at weekend, but for sure it is possible, just reference one of the copied static files in the assets.

[Gábor Soós]

@mraible added an example for it to the about component
ebc1157