Webpack - WARNING: Tried to load angular more than once. Angular JS - angularjs

Question

I have built 3 separate npm modules with webpack.
They all have a dependency on angular because I have the line:
var angular = require('angular');
in the angular module definitions for each npm module.
One of the modules has a dependency on the other 2:
var angular = require('angular');
var ngModule = angular.module('topModule', [
require('dependency1'),
require('dependency2')
]);
I believe the reason I'm getting the tried to load angular more than once error is because Angular has been included in all 3 of the bundles built by webpack.
I understand that I could have configured webpack to put angular in a separate file (e.g. vendor.js), but I thought that when I built the top level file, it would see that Angular was already included by the other 2 modules and wouldn't add it again.
How do I use `require('angular')' in all of the modules, but only have it included once in the top level module?

Answer 1

I had this issue as well. For me, it ended up being that I was using the html-webpack-plugin and passing in my own template, like so in my webpack.config.js:
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
}),
],
In this template file, I had the line:
<script src="bundle.js"></script>
This line is automatically injected by html-webpack-plugin, and therefore I was loading my bundle twice. See plugin docs here.
Hope this helps!

Answer 2

For those who use npm, webpack encore in Symfony
with multiple local packages bootstrapped by Lerna:
(webpack.config.js)
...
const path = require('path');
...
Encore
...
.addAliases({
'angular': path.resolve(path.join(__dirname, 'node_modules', 'angular'))
})
...
It will refer all require 'angular' to the root node_module folder.
Just don't forget to add angular to your package.json in root and run 'npm install'. As for the local packages, 'lerna bootstrap', 'lerna exec npm install', 'npm run encore {desire enviroment}'