I am trying to add async-css-plugin
(https://www.npmjs.com/package/async-css-plugin) to Angular project. What this plugin does is, it converts the external style link tag in html file to something like:
<link href=app.cfadf482.css rel=stylesheet media=print onload="this.media='all'">
I know we can extend webpack config, for this I am using ngx-build-plus
(https://github.com/manfredsteyer/ngx-build-plus)
And I have added below config extend.webpack.config
file:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const AsyncCssPlugin = require("async-css-plugin");
module.exports = {
plugins: [
new HtmlWebpackPlugin(),
new AsyncCssPlugin({ /* options */ })
]
};
But now when I run npm run build -- --prod --extra-webpack-config extend.webpack.config.js
, it doesn't work.
it doesn't modify the index.html file.
Can anyone please guide if I'm missing something?
Thank you!
Update Here's the reproduction repo https://github.com/andreashuber69/async-css-angular-example
And here's the plugin source code https://github.com/andreashuber69/async-css-plugin/blob/37e9030fc4791370cd7efaf25a7275ff425c2d36/src/AsyncCssPlugin.ts
Updated Webpack Config :-
Change Angular.json Customwebpackconfig like :-