Angular CLI not allowing custom webpack loader to run on index.html

[ashutoshmittal2309]

Command

- [ X] build
- [ X] serve

Is this a regression?

No. We are migrating from older versions to use Angular 7 cli project for first time

Description

We have written a custom webpack loader for our requirements which needs to be run on index.html file. To extend webpack configuration, we used below npm module -

https://github.com/meltedspark/angular-builders

We updated the angular.json file as per documentation of above module.

We were able to successfully use this module to extend webpack config but observed that our loader was run for all html files within project except index.html. Here is our custom webpack config that we used alongside the module -

const path = require('path');
module.exports = {
 module: {
    rules: [{
      test: /\.html/,
      use: [
          '<custom-loader>'
       ]
    }]
 }

While debugging, we found that index.html is handled separately using IndexHTMLWebpackPlugin by CLI which we assume might be the cause of this behavior.

Why we need custom loader?
We have a large website developed in a federated model and maintained by many teams across different geographic locations. To maintain consistency across all pages for Header/Footer content we have developed it separately as a Preact application. We use this Webpack loader to update index.html with HTML/JS/CSS of our application.

We are using Index.html to inject the code to keep Preact application out of Angular context.

@alan-agius4 I had discussed this with @mgechev during Angular conference last week and he suggested me to file a bug and reach out to you

[alan-agius4]

Hi @ashutoshmittal2309, thanks for reaching out.

Loaders are transformations that are applied on the source code of a module. They allow you to pre-process files as you import or require from one of your entry points IE. are a dependency of your entrypoint. The Index html is never loaded/required into the compilation by an entrypoint hence it will not be loaded via a loader and hence that why there is the plugin.

In version 8 of the CLI, this behaviour changes a bit more as well. When having differential loading builds, the index generation has been moved outside of Webpack. Hence, it cannot be modified using a Webpack plugin.

Most likely, we should provide a way to transform the index html, at least a basic one.

[ashutoshmittal2309]

@alan-agius4 Thanks for your response. Can you please provide a bit more details about the new solution and is there a timeline?

[mikejf-pr]

I'd like an explanation and usage of this hook as well; we've a similar use case in an established enterprise environment.

[ashutoshmittal2309]

@kyliau @alan-agius4 Can you guys provide some documentation around how this hook can be used by us?

[jecfish]

@ashutoshmittal2309, @mikejf-pr, refer to the commits code changes (I faced the same issue), you don't need to do anything for the hook because it push to the extra plugins array.

I've upgrade my project to rc4 and my webpack extra plugins work as expected. Give it a try!

[SamanthaAdrichem]

@chybie do you have a bit of example code? I'm trying to inject some base CSS based on a whitelabel for the initial load.

[camsong]

@alan-agius4 can you provide some document or example code to do custom loader in angular-cli V7 or V8, really appreciate that.

[antch]

I'd also appreciate an example if it's possible to achieve this easily without a 3rd-party library, but for now I'm using angular-builders which provides a hook into the index.html transform.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}