如何创建可重用的角度2组件（库）

Question

1. 我有一个使用角度CLI创建的简单角度组件（ng new component-name，它有示例模块）。
2. 将组件名称发布到我的私人npm存储库。
3. ng build 用于创建分发文件 - dist / mySampleComponent.js ： ：
4. 使用角度CLI创建了另一个简单的角度应用程序。
5. 是否安装了npm以安装模块组件名称
6. 模块已成功复制到node_modules / @ private-repo / component-name下的角度应用程序
7. 当我从AppModule中的'@ private-repo / component-name'导入{SampleModule}时;我收到以下错误

模块'“... / node_modules / @ private-repo / component-name / dist / mySampleComponent”'没有导出的成员'SampleModule'。

有什么想法吗？

Answer 1

＆＃34; ng build用于创建分发文件 - dist / mySampleComponent.js＆＃34;

我怀疑这是你出错的地方。

当你<a href="https://google.com" target="_blank"> https://google.com</a> 一个角度项目时，它会将打字稿编译成javascript。 Javascript没有模块或组件，因为它们被转换为本机javascript / webpack代码。

您收到错误的原因......

build

...是因为您的 Module '".../node_modules/@private-repo/component-name/dist/mySampleComponent"' has no exported member 'SampleModule'.` 不再包含角度转换器可识别的相关模块装饰器/元数据。

如果您进入角度项目并浏览mySampleComponent.js中的某些预编译导入，例如node_modules或@angular/core等中的预编译导入，您会看到这些都包括打字稿文件。将其与编译后使用的文件进行比较，您可以看到它们只包含rxjs个文件。这是由于前面提到的。

Answer 2

1. ng build只需编译打字稿并吐出javascript
2. 要获得Javascript的转换版本，我们可以使用编译器＆＃39; ngc＆＃39;
3. 如果您的代码包含css和html，那么我们需要其他捆绑API，例如webpack

所以为了构建一个角度库，我们需要ngc + webpack（SystemJS，gulp或任何其他构建框架）