如何在 angular-cli 项目中导入 webpack 库答案

【问题标题】：How to import webpack library in a angular-cli project如何在 angular-cli 项目中导入 webpack 库
【发布时间】：2018-09-25 14:27:51
【问题描述】：

这是我在 stackoverflow 上的第一篇文章。

我正在尝试在 angular-cli 项目中导入我的社会开发的库。

这是一个 Angular-cli 项目（Angular v6），该库是一个使用 webpack 构建的 Angular 项目。

当我导入库时，我得到了很多错误。

我的过程：

导入package.json中的库
在我的 angular.json 文件中导入一些脚本（相对于我的特定库）

lib files

"scripts": [
    "node_modules/chart.js/dist/Chart.js",
    "node_modules/hammerjs/hammer.min.js",
    "node_modules/email-builder/dist/polyfills.bundle.007e569078d25408929d.js",
    "node_modules/email-builder/dist/main.bundle.007e569078d25408929d.js"
]

当我编译我的项目时，我收到了这个错误： error

我试图像这样调用 lib 方法：

_init() {
    window['angularComponentRef'].zone.run(() => {
        window['angularComponentRef'].component.initEmailBuilder();
    });
}

【问题讨论】：

请考虑使用实际文本（带有代码格式）而不是图像，只要图像仅包含文本。

标签： angular webpack angular-cli lib

【解决方案1】：

在将 lib 添加到 package.json 后，您是否运行过 npm install？您可以先删除 node_modules 文件夹以进行新的安装。

似乎缺少 lib 或在运行时引用了错误的版本。

在 webpack 案例中 - angular-cli 安装了 webpack 作为依赖项。你不应该添加一个新的。 Angular-cli 仅适用于特定的 webpack 版本。

【讨论】：