AngularJs 多次加载

Question

我在将 angularJs 应用程序升级到 Webpack4 时遇到问题。

这是我的设置：

vendor.ts

import "angular";
import "angular-i18n/de-de";
import "angular-route";

和

main.ts
import {MyAppModule} from "./my-app.app";

angular.element(document).ready(() => {
    angular.bootstrap(document.body, [MyAppModule.name], { strictDi: true });
});

使用 webpack 3。我有一个 commonsChunkPlugin 并且一切正常。

使用 webpack 4，我使用 splitChunks 选项不导入 angularjs 5 次：

webpack.config.ts
...
optimization: {
    splitChunks: {
        cacheGroups: {
            commons: {
                name: "commons",
                chunks: "initial",
                minChunks: 2
            }
        }
    }
}
...

这是正常工作。我只在我的common.js文件中加载了 angularjs 代码。但不幸的是代码被实例化了两次，所以应用程序总是记录警告：

警告：尝试多次加载 AngularJS。

这些块是通过HtmlWebpackPluginhtml加载的。

知道如何删除警告吗？

Answer 1

在github问题的深处找到了解决方案：

供应商文件不应该是入口点，但入口点应该是文件列表：

...
 entry: {
    main: ['./vendor.js', './main.js']
},
...