This post will show how to work with systemjs and text plugin to achieve relative template and styles URLs.

Step 1:

Download the SystemJs Text plugin.

Step 2:

For SystemJS use, locate text.js in the application, and then locate it with map configuration:


map: {

text: ‘path/to/text.js’




Step 3:

Imports the html and css file into the module and then use it in @Component decorator. See code.

import {Component} from ‘angular2/core’;
import html        from ‘./SubComp.html!text’;
import css         from ‘./SubComp.css!text’;

selector: ‘sub-app’,
template: html,
styles  :[css]
export class MyComponent {}



With relative URLs it more easy to organize each Component and it materials (HTML and CSS) in one folder.

If we need to move the folder it will be very easy to do it, without to update the template and styles URLs in the @Component decorator.

Source: Angular 2.0 – Relative template and styles URLs | Eyal’s space

Posted in: Articles.
Last Modified: March 26, 2016

Leave a Reply