Is this plugin compatible with Angular apps?

[naveedahmed1]

Is this plugin compatible with Angular projects?

I tried adding below to my extended webpack config file for my Angular project

const HtmlWebpackPlugin = require('html-webpack-plugin')
const AsyncCssPlugin = require("async-css-plugin");

module.exports = {
  plugins: [
    new HtmlWebpackPlugin(),
    new AsyncCssPlugin({ })
  ]
};

But it didn't work, nothing changed in index.html, am I missing something or is this plugin incompatible with Angular?

Thanks

[andreashuber69]

Is this plugin compatible with Angular projects?

Frankly, I don't know. I haven't tried myself and I don't know anyone who is using this with Angular.

Is your project open source? If so, please provide a link & I'll have a look myself.

[naveedahmed1]

Thanks @andreashuber69 for your reply. I'm sorry the project isn't opensource but you should be able to generate a demo Angular project by running few commands through Angular CLI as mentioned here https://cli.angular.io/ , would it be helpful?

[andreashuber69]

Thanks @andreashuber69 for your reply. I'm sorry the project isn't opensource but you should be able to generate a demo Angular project by running few commands through Angular CLI as mentioned here https://cli.angular.io/ , would it be helpful?

I can reproduce the problem with this repo. The console output suggests that everything is working as expected:

95% emitting HtmlWebpackPlugin
AsyncCssPlugin[info]: index.html: Modified link to styles.css.

... but then of course the stylesheet links are not modified in the output. I'm not sure why the plugin fails to work with Angular but works fine with other frameworks. I will dig deeper later.

[naveedahmed1]

Thank you so much for the update. I'll wait for your findings.

[andreashuber69]

Thank you so much for the update. I'll wait for your findings.

Unfortunately, I was unable to find a solution. As always, ideas, hints, etc. are very welcome!

[naveedahmed1]

It seems that the index.html is being written twice. The plugin makes changes and then Angular CLI updates the index.html and discards the changes made by this plugin.

I also posted it on Stackoverflow but no success yet https://stackoverflow.com/questions/61965344/angular-running-custom-plugin-after-build

[andreashuber69]

It seems that the index.html is being written twice. The plugin makes changes and then Angular CLI updates the index.html and discards the changes made by this plugin.

I also posted it on Stackoverflow but no success yet https://stackoverflow.com/questions/61965344/angular-running-custom-plugin-after-build

2.5 years later, while the plugin keeps working as expected with e.g. native webpack v5, Vue v3 and the latest version of React, Angular v14 still misbehaves as described above. Unfortunately, it appears there's no way to fix this.