Angular 2.0 – Relative template and styles URLs

26 מרץ

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.

2 תגובות

פורסם ע"י ב- מרץ 26, 2016 ב- Angular 2.0


2 תגובות ל-“Angular 2.0 – Relative template and styles URLs

  1. eyal

    אפריל 20, 2016 at 3:47 am

    Doesn't really help when you use typescript. TSC will show red on this import line because it's not a module.

  2. eyal.vardi

    אפריל 20, 2016 at 9:30 am

    יש פתרון חדש:

    // Let TypeScript know about the special SystemJS __moduleName variable
    declare var __moduleName: string;
    moduleId: __moduleName,
    selector: 'quest-summary',
    templateUrl: 'quest-summary.component.html',
    styleUrls: ['quest-summary.component.css']
    export class QuestSummaryComponent { }


להשאיר תגובה

הזינו את פרטיכם בטופס, או לחצו על אחד מהאייקונים כדי להשתמש בחשבון קיים:

הלוגו של

אתה מגיב באמצעות חשבון שלך. לצאת מהמערכת /  לשנות )

תמונת גוגל

אתה מגיב באמצעות חשבון Google שלך. לצאת מהמערכת /  לשנות )

תמונת Twitter

אתה מגיב באמצעות חשבון Twitter שלך. לצאת מהמערכת /  לשנות )

תמונת Facebook

אתה מגיב באמצעות חשבון Facebook שלך. לצאת מהמערכת /  לשנות )

מתחבר ל-%s

%d בלוגרים אהבו את זה: