使用 Angular 7 在混合应用程序中加载 Angularjs 包

Posted 2023-02-19

【中文标题】使用 Angular 7 在混合应用程序中加载 Angularjs 包

【英文标题】：Load Angularjs bundle in a hybrid application with Angular 7

【发布时间】：2019-05-23 14:31:06

【问题描述】：

我有一个很大的应用程序，我应用了一些更改以使其成为混合。

如果旧的 Angularjs 应用程序包按时加载，它将正常工作。 （这是一个 4-5MB 的捆绑包） 我在网上查了一些样本，他们中的大多数人都这么说。例如：

https://github.com/manfredsteyer/ngUpgrade-lite-sample/blob/master/src/index.html

这会起作用，因为它是一个小应用程序，他只是手动导入所有模块和组件，而在我的应用程序中有超过 200 个组件是不可能的。

那么在 Angular 混合应用程序中加载 Angularjs 应用程序包的最佳方法是什么？

我将旧应用程序与 Webpack 4 捆绑在一起，还尝试将其导入 main.ts 文件中，还尝试了 angular.json 中的 script 并没有运气，它给了我错误：

未捕获的错误：[$injector:nomod] 模块“app”不可用！

我想这一定是因为在新的 angular 7 引导应用程序之前没有加载 angularjs

【参考方案1】：

好吧，伙计们，我刚刚想通了。有两种方法可以做到这一点，首先是创建一个 javascript 加载器，您可以在此处找到如何操作：

https://davidwalsh.name/javascript-loader

我所做的另一个解决方案是创建一个独特的构建过程。这意味着我完全取出了 Angular 7 构建过程并将其复制到我的 Angularjs Webpack 配置中，因此最终结果是一个包，其中包含同一包中的两个应用程序。

为此，您可以查看这个包，它为您提供 Webpack 中 Angular 的构建工具：

https://github.com/angular/ngtools-webpack-builds

请记住，您应该在 Webpack 配置文件中通过 raw-laoder 处理 html 和 scss 文件。

如果我发现新内容，我会更新这篇文章以提供更多信息。