CODEWITHSUNDEEP
angularwebpackhtml-webpack-pluginangular-builderngx-build-plus
Naveed Ahmed
Naveed Ahmed

Reputation: 10386

Angular running custom plugin after build

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

Upvotes: 1

Views: 2023

Answers (1)

Aakash Garg
Aakash Garg

Reputation: 10979

Updated Webpack Config :-

const HtmlWebpackPlugin = require('html-webpack-plugin')
const AsyncCssPlugin = require("async-css-plugin");
var path = require('path');
module.exports = {
  output: {
    path: path.resolve(__dirname, './dist')
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new AsyncCssPlugin({ logLevel: "info" })
  ]
};

Change Angular.json Customwebpackconfig like :- 

"customWebpackConfig": { "path": "./custom-webpack.config.js", "mergeStrategies": { "module.rules": "prepend" }, "replaceDuplicatePlugins": true }

Upvotes: 1

Related Questions