我的要求是创建具有自己 View 的库,并根据用户的配置,库将从 AWS S3 Bucket 中获取并在运行时包含在最终应用程序中。
See this example .我可以在主应用程序中添加 dist/library/bundles/library.lib.umd.js
并将其显示给用户。但是当我尝试使用像 uuid
、moment
或 ng2-dragula
这样的第三方库时,ng build
命令最终 bundle 中不包含任何第三方库。我收到这样的警告
'ng2-dragula' is imported by ..\..\dist\torab-custom-lib\esm5\lib\custom-lib.service.js, but could not be resolved – treating it as an external dependency
在构建库和我的应用程序时,projects/library
存在显示
ERROR in dist/torab-custom-lib/lib/custom-lib.component.d.ts(2,32): error TS2307: Cannot find module 'ng2-dragula
我想要的是在最终包中包含我使用的任何第三方库,因为我无法在运行时安装/导入它们。我试过了
"bundledDependencies": [
"ng2-dragula"
]
按照建议在 package.json
中 here和
"embedded": [
"ng2-dragula"
],
在我的 ng-package.json
中建议 here .这是我的环境信息
Angular CLI: 7.1.4
Node: 11.10.0
OS: win32 x64
Angular: 7.1.4
... animations, cli, common, compiler, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Package Version
------------------------------------------------------------
@angular-devkit/architect 0.11.4
@angular-devkit/build-angular 0.13.5
@angular-devkit/build-ng-packagr 0.11.4
@angular-devkit/build-optimizer 0.13.5
@angular-devkit/build-webpack 0.13.5
@angular-devkit/core 7.1.4
@angular-devkit/schematics 7.1.4
@angular/compiler-cli 7.2.9
@ngtools/json-schema 1.1.0
@ngtools/webpack 7.3.5
@schematics/angular 7.1.4
@schematics/update 0.11.4
ng-packagr 4.7.1
rxjs 6.3.3
typescript 3.1.6
webpack 4.29.0
请帮忙。如果有不同的方式在应用程序运行时加载第三方库,也请提出建议。
最佳答案
构建库后,使用 rollupjs 从 fesm5 文件捆绑第三方库。
这是我的 rollup.config :
import resolve from 'rollup-plugin-node-resolve';
import sourcemaps from 'rollup-plugin-sourcemaps';
import commonjs from 'rollup-plugin-commonjs';
export default {
plugins: [
resolve(),
sourcemaps(),
commonjs({
namedExports: {
'node_modules/chart.js/dist/Chart.js': ['Chart' ]
}
})
],
onwarn: () => { return },
output: {
format: 'umd',
name: 'mylib',
globals: globals,
sourcemap: true,
amd: { id: 'mylib' }
}
}
然后我使用这个汇总命令:
rollup -c rollup.config.js -i .\dist\mylib\fesm5\mylib.js -o .\dist\mylibwiththirdparty.umd.js
关于Angular 库无法在 bundle 中包含第三方库,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55160107/