I'm facing a challenge while upgrading my angularJs Application to Webpack4.
This is how I've set it up:
vendor.ts
import "angular";
import "angular-i18n/de-de";
import "angular-route";
and
main.ts
import {MyAppModule} from "./my-app.app";
angular.element(document).ready(() => {
angular.bootstrap(document.body, [MyAppModule.name], { strictDi: true });
});
Previously with webpack 3, using the commonsChunkPlugin everything worked fine.
Now with webpack 4, I've opted for the splitChunks option to prevent importing angularjs multiple times:
webpack.config.ts
...
optimization: {
splitChunks: {
cacheGroups: {
commons: {
name: "commons",
chunks: "initial",
minChunks: 2
}
}
}
}
...
The splitting is working as expected. The angularjs code is now only in my common.js file. However, the code seems to be instantiated twice which triggers the following warning message:
WARNING: Tried to load AngularJS more than once.
The chunks are loaded into the html using HtmlWebpackPlugin.
Does anyone have an idea on how to resolve this warning?