如何为SystemJS和Webpack的angular 2组件templateUrl编写单个url? [英] How write single url for angular 2 component templateUrl for SystemJS and Webpack?

问题描述

我发现对于 SystemJS 和Webpack项目，构建在 Angular2 @Component templateUrls 字符串中的字符串必须不同.

I find out that for SystemJS and Webpack project builds in Angular2 @Component templateUrls string must be different.

对于SystemJS:

For SystemJS:

@Component({
    selector: 'home'
    templateUrl: './app/home/home.component.html'
})
export class HomeComponent implements OnInit, OnDestroy {
    ...
}

对于Webpack:

@Component({
    selector: 'home'
    templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit, OnDestroy {
    ...
}

对于 SystemJS ，构建 templateUrl 字符串必须是根目录的完整路径.对于 Webpack ， templateUrl 必须是根目录的非完整路径(用于组件和组件描述的HTML模板， *.ts 文件位于一个位置).是否可以为 SystemJS 和 Webpack 编写单个templateUrl字符串?要更快速地切换beetwen SystemJS/Webpack ，就可以了.我尝试为 templateUrl 使用可变字符串:

For SystemJS build templateUrl string must be full path from root. For Webpack templateUrl must be non full path from root (html template for component and component description *.ts file located in one location). It is possible to write single templateUrl string for SystemJS and Webpack? For mutch quicker switch beetwen SystemJS/Webpack. I try to use variable string for templateUrl:

import { loginComponentTemplateUrl } from '../shared/url-routing-provider';

@Component({
    templateUrl: loginComponentTemplateUrl 
})

url-routing-provider.ts :

export var systemjs: boolean = true;
export var loginComponentTemplateUrl: string = (systemjs) ? './login.component.html' : './app/login/login.component.html';
export default systemjs;

对于 SystemJS ，它可以工作(适用于AMD模式)，但对于 Webpack ，则无效.我的previos帖子与此相关:如何声明并将变量导入angular 2 webpack上的组件中?

For SystemJS it works (for AMD pattern), but for Webpack not. My previos post related for this: How declare and import variable into component on angular 2 webpack?

推荐答案

要将相对路径与systemJs模块加载器一起使用，您可以

To use relative paths with systemJs module loader you can set the moduleId. This trick, however, does not work when you switch to webpack, which uses numeric module identifier.

同时适用于 webpack和system.js的解决方案:

A solution that works for both webpack and system.js:

@Component({
   moduleId: typeof module.id == "string" ? module.id : null,
   selector: 'home'
   templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit, OnDestroy {
  ...
}

它可以工作，但是我不能说它很漂亮.

It works, but I cannot tell it is pretty.

这篇关于如何为SystemJS和Webpack的angular 2组件templateUrl编写单个url?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！