Do you want to request a feature or report a bug?
I have a configuration question.
What is the current behavior?
We are trying to upgrade an angular project to use AoT compilation and to use Webpack 4 as well. We have a vendor.ts file which includes some javascript that defines an old school jquery function. We then have a component that uses that jquery function. When upgrading to Webpack 4 we are getting a runtime error of that function is not defined. The component that uses it ends up in an async chunk file that gets inserted in the html file’s <head> tag.
// vendor.ts
import 'floatthead/dist/jquery.floatThead.js';
// SomeComponent.ts
ngOnInit() {
$(selector).floatThead();
}
Our general setup is very similar to the one listed here https://angular.io/guide/webpack. Some relevant sections in our webpack config:
entry: {
'vendor': './client/vendor.ts',
'app': './client/main.ts'
},
// ...
plugins: [
new ngToolsWebpack.AngularCompilerPlugin({
tsConfigPath: './tsconfig.json',
entryModule: helpers.root('app/app.module#AppModule'),
sourceMap: true
}),
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery'
})
// ...
]
We are not using any custom splitChunks plugin configuration (just the defaults).
So the question is is there a way to tell webpack and splitChunks that app depends on vendor or have vendor be available globally or something similar? Should we just import vendor in app, that seems a bit inefficient? Is there a better solution to this? I believe we tried importing the floatThead js directly in the component as well but that was just generating different js errors.
Hope this makes sense. Let me know if I need to add any other relevant information. Thank you.
If the current behavior is a bug, please provide the steps to reproduce.
What is the expected behavior?
If this is a feature request, what is motivation or use case for changing the behavior?
Please mention other relevant information such as the browser version, Node.js version, webpack version, and Operating System.
Webpack 4.4.1, Node 8.9.4, Windows 10
Delete the vendor file. Remove the vendor entry.
Add
import 'floatthead/dist/jquery.floatThead.js';to Some component since it’s used there.Always make dependencies explicit.
webpack will take care of creating a separate vendor output file when
optimization.splitChunks.chunks: "all"is set.