带有 TemplateURL 的 NPM Angular 组件？答案

【问题标题】：NPM Angular Component with TemplateURL?带有 TemplateURL 的 NPM Angular 组件？
【发布时间】：2017-06-30 12:54:07
【问题描述】：

我正在尝试打包具有模板的 Angular 组件。

@Component({
  selector: 'foo',
  templateUrl: 'foo.component.html'
})
export class FooComponent {

}

在同一个文件夹中是我的模板

<div>Foo Component</div>

我想将它打包并分发到 npm，以便我可以将它安装到另一个项目中。

npm install foo

并将其添加到我的其他项目中

import {FooComponent} from 'foo';

@NgModule({
  declarations: [
    FooComponent
  ]
})

所以我可以通过选择器将它添加到我的项目中

<div>
  Foo Component: <foo></foo>
</div>

但我不确定如何构建和导出以便解析模板。我的模板很大，所以我不想要内联模板。我该怎么做？

【问题讨论】：

【解决方案1】：

你的 templateUrl 应该是，如果它在当前目录中

templateUrl: './foo.component.html'

当前目录使用./。

【讨论】：