When it comes to specifying urls for the templateUrl and styleUrls properties of Component decorators in Angular2, there are at least two ways you can do so:
- You can use an "absolute" path or a path relative to the project root (which is the default option).
- You can also specify a path relative to the current document/component by including
moduleId: module.idin the decorator.
But what if you want to combine both methods? For example, let's say you want to use two different style files for one component:
- A general style file that applies to your entire project.
- In this case, you would use
my-general-project-styles.csslocated directly in the project root for easy access by multiple files throughout the project.
- In this case, you would use
- A specific style file for the current component.
- Here, you would use
my-specific-component.styles.csslocated relative to the current file/component for flexibility in moving files and associated styles around.
- Here, you would use
For instance:
@Component({
moduleId: module.id, // Unsure if this should still be used
template: '<h1>My Component</h1>',
styleUrls: ['my-general-project-styles.css', 'my-specific-component-styles.css']
})
export class MyComponent {}
Just a note: I am utilizing the commonjs module in this scenario.