Failed to load angularjs $templateCache template on dependencies with webpack - angularjs

Question

Sorry for such a similar question to others out there, but I cant seem to make any of them work.
I understand that when using webpack, the standard way of incluing templates in your angular application is via the require. ie
template: require('./sometemplte.html')
I have done that in all of my app code and that works fine.
But i have four dependent libraries that use templateUrl, lets focus on angular-ui-boostrap.
my webpack.conf.js
entry: {
vendor: "./src/vendor.ts",
app: "./src/ClientApp/app.ts"
},
output: {
filename: "[name].js",
path: __dirname + "/wwwroot"
},
module: {
rules: [
{ test: /\.ts$/,
loader: "ts-loader"
}, {
test: /\.html$/,
loader: 'raw-loader'
}
inside vendor.ts i have
require('angular');
require('angular-ui-bootstrap');
and inside my app i am simply using the directive
<uib-typeahead></uib-typeahead>
the code inside my node_modules is not code that I can to modify. But currently i am getting the following error
angular.js:14700 Error: [$compile:tpload] Failed to load template: uib/template/typeahead/typeahead-popup.html
http://errors.angularjs.org/1.6.6/$compile/tpload?p0=ui-grid%2Fui-grid&p1=undefined&p2=undefined
I verified that the template is within $templateCache in my app. but for whatever reason it is not available for $compile to do its thing.
So how can i get $templateCache to work with webpack so my external dependencies will work?
Thanks in advance.

Answer 1

Thanks to John Reilly i finally figured it out.
There is a plugin called splitChunks , which use to be CommonsChunksPlugin. Once i inlcuded that into my configuration everyting just worked. I just used the default configuation mentioned here
https://webpack.js.org/plugins/split-chunks-plugin/
note: although it is a plugin, it does not go in the plugins array. it goes into the optimization object.
entry: {...},
output: {...},
optimization: {
splitChunks: {
chunks: "async",
minSize: 30000,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
}