如何在 Angular 中导入 webpack 捆绑的 js 文件答案

【问题标题】：How to import webpack bundled js file in Angular如何在 Angular 中导入 webpack 捆绑的 js 文件
【发布时间】：2021-11-30 18:17:54
【问题描述】：

我有一个 js 文件，其中所有模块都使用 webpack 捆绑在一起，我想在 angular 中使用该文件。文件太大所以我在这里粘贴了几行代码。

【问题讨论】：

这个文件是什么？您要如何以及为什么要在 Angular 中使用该文件？你在使用角度 CLI 吗？
这是一个 webpack 捆绑的 js 文件，我想在其中调用模块并将它们暴露给外部组件。我正在使用角度 CLI。

标签： angular typescript pdfjs pdfjs-dist

【解决方案1】：

如下例，angular.json文件中，CSS和JavaScript文件分别包含在"styles":[]和"scripts":[]下：

 "styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.css"
  ],
  "scripts": [
      "node_modules/jquery/dist/jquery.min.js",
      "node_modules/popper.js/dist/umd/popper.min.js",
      "node_modules/bootstrap/dist/js/bootstrap.min.js"
  ]

所以，如果您有自己的JavaScript 文件，您可以在angular.json 文件中的"scripts":[] 的同一位置添加文件路径。

编辑

您可以在polyfills.ts 中导入您自己的JavaScript 文件，或者更好地仅在您的特定组件中需要它时才导入它。

【讨论】：

我尝试在脚本部分添加 js 文件，但没有成功，还有其他一些依赖项会抛出错误。我们可以将 webpack 捆绑模块暴露给外部组件吗？
你能检查一下我答案的编辑部分吗？