Question

我正在做我的第一个Angular 2库。目前，它只是一个组件库。我想要一个与Webpack和SystemJS兼容的库。我设法编写了一个第一个组件，其代码与SystemJs兼容，并重写代码以与Webpack兼容，但是哪个代码是强制它与两者兼容的？

import {Component} from '@angular/core';

@Component({
  selector: 'foo',
  moduleId: typeof module.id == "string" ? module.id : null,
  templateUrl: 'foo.component.html',
  styleUrls: ['foo.component.css']
})
export class FooComponent {
 logo: String;
 name: String;
 constructor() {
  this.logo = '';
  this.name = 'My name';
 }
}

目前我发现this trick解决了相对路径问题的一部分。这适用于systemJS，但我仍然使用Webpack的项目出现此错误：

Cannot GET /application.component.html
Unhandled Promise rejection: Failed to load foo.component.html ; Zone: <root> ; Task: Promise.then ; Value: Failed to load  foo.component.html undefined
Error: Uncaught (in promise): Failed to load foo.component.html

Answer 1

我找到了一个基于npm包ng2-inline-require的解决方案。此工具编译scss和html外部文件，并将代码注入与SystemJS和Webpack兼容的样式和模板属性。

import {Component} from '@angular/core';

@Component({
 selector: 'foo',
 moduleId: typeof module.id == "string" ? module.id : null,
 template: require('./foo.component.html'),
 styles: [ require('./foo.component.css') ]
})
export class FooComponent {
 logo: String;
 name: String;

 constructor() {
   this.logo = '';
   this.name = 'My name';
 }
}

并像这样编译：

ng2-inline-require -i ./src/foo.component.ts -o ./dist/foo.component.ts

如何使Angular 2组件库与webpack.js和system.js兼容？

1 个答案: