AngularJs Multiple Times loaded

Question

I have a problem with upgrade my angularJs Application to Webpack4.

this is my setup:

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 });
});

With webpack 3. I had a commonsChunkPlugin and everything worked.

With webpack 4, I'm using the splitChunks option to not import angularjs 5 times:

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

That is working correctly. I have loaded the angularjs code only in my common.js file. But unfortunatelly the code is instantiated twice, so the app always logs the warning:

WARNING: Tried to load AngularJS more than once.

The chunks are loaded via HtmlWebpackPlugin in the html.

Any idea how to remove the warning?

Answer 1

Found the solution in the deeps of github issues:

The vendor file should not be an entry point but the entry point should be a list of files:

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