Angular 库无法在bundle中包含第三方库

Question

我的要求是创建具有自己视图的库，并根据用户的配置，库将从 AWS S3 存储桶获取，并在运行时包含在最终应用程序中。 请参阅此示例。我可以在主应用程序中添加dist/library/bundles/library.lib.umd.js并将其显示给用户。但是当我尝试使用第三方库(如uuid、moment或ng2-dragula)时，ng build命令在最终捆绑包中不包含任何第三方库。我收到这样的警告

'ng2-dragula' is imported by ....disttorab-custom-libesm5libcustom-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和

"embedded": [
"ng2-dragula"
],

在我的ng-package.json这里建议。这是我的环境信息

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

请帮忙。另外，如果有不同的方法可以在应用程序运行时加载第三方库，请提出建议。

Answer 1

构建库后，使用 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 .distmylibfesm5mylib.js -o .distmylibwiththirdparty.umd.js