如何创建一个可重用的角度2组件(库)
- 我有一个简单的角度组件创建使用角CLI(ng新组件名称,这有示例模块)。
- 将组件名称发布到我的私有npm存储库。
- 纳克建立用于创建发布文件 - DIST/mySampleComponent.js : :
- 创建使用角CLI另一简单的角应用。
- 做了NPM安装到安装模块组件的名称
- 该模块下node_modules /成功地复制到角应用@私人回购/组件的名称
- 当我导入{SampleModule}从“@private -repo/component-name'在我的AppModule中;我收到以下错误
模块'“.../node_modules/@ private-repo/component-name/dist/mySampleComponent''没有导出成员'SampleModule'。如何创建一个可重用的角度2组件(库)
有什么想法?
“NG构建用于创建分发文件 - DIST/mySampleComponent.js”
我怀疑这是你要去哪里错了。
当你的build
是一个角度项目,它将打字稿编译为javascript。 Javascript没有模块或组件,因为它们被转换为原生javascript/webpack代码。
,你得到了错误的原因...
Module '".../node_modules/@private-repo/component-name/dist/mySampleComponent"' has no exported member 'SampleModule'.`
...是因为你的mySampleComponent.js
不再包含相关模块装饰/元数据由角transpiler识别。
如果你进入一个角项目和甩尾通过一些预编译的进口在node_modules
如在@angular/core
或rxjs
等,你会看到,这些都包括打字稿文件。将此与编译后使用的相比较,您可以看到它们只包含.js
文件。这是由于前面提到的。
不应该在ts中使用以下编译器选项{'“target”:“es5”, “module”:“es2015”}。配置足以吐出适用于任何浏览器的最终捆绑包 – Jay
- 纳克构建简单的编译打字稿和吐奶的JavaScript
- 获取JavaScript的transpiled版本中,我们可以使用编译器“NGC”
- 如果你的代码,包括CSS和HTML,那么我们就需要更多的捆绑API像的WebPack
所以为了打造我们需要NGC +的WebPack(SystemJS,一饮而尽或任何其他构建框架)
好像你可能在某种程度上被采用了棱角分明的角图书馆,这不是前行事标准。 Angular是开发单页网页应用程序的框架,并未设置用于创建独立的npm模块。在使用'ng build'构建Web应用程序之后,它只是一个单页的Web应用程序。 –
在sample.module中的section部分导出:[...]放入您的模块和组件 – alehn96