custom-webpack: string-replace-loader result not included in a build result

[i-am-cracker]

Hi!

I'm trying to change a string in the templateUrl property of the Angular component decorator. For that I'm using custom-webpack builder and string-replace-loader. For test I created a simple project that contains only app.component. Minimal reproduction is available below.

Description

My replaced by string-replace-loader templateUrl string is not included in the build result, but instead the default app.component.html content is included.

Interesting:
When mergeRules.module.rules is append I see my console.log in a replace function and understand that the string find and needs to be replaced.
When it's prepend the already converted template gets into the loader and obviously it does not find the correct string to replace.
When I add enforce: "pre" to the rule object the result will pretty similar as for append

Minimal Reproduction

I have a pretty small piece of code in webpack.config.js, so, here it is:
first way, with replace function and a console for smth like "debug":

module.exports = {
  module: {
    rules: [
      {
        // enforce: 'pre',
        test: /\.component.ts$/,
        use: {
          loader: 'string-replace-loader',
          options: {
            search: /([\w-]+)\.component\.html/,
            replace: function (match, reg, offset, string) {
              console.log('component content as a string', string);
              return 'changed.component.html'
            }
          }
        },
      }
    ]
  }
};

and even less but still not working

module.exports = {
  module: {
    rules: [
      {
        test: /\.component.ts$/,
         loader: 'string-replace-loader',
         options: {
           search: /app\.component\.html/,
           replace: 'changed.component.html'
         }
       }
    ]
  }
};

in angular.json

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./conf.js",
          "mergeRules": {
            "module": {
              "rules": "append"
            }
         }
      }
    }
  }
}

and two small html templates:
app.component.html

default app.component content

changed.app.component.html

changed app.component content

reproduction repo is available here

• to build a project use ng build command it will build an application in development mode for more convenience

Expected Behavior

The content of dist/main.js file and specifically it's component part is created with the content of replaced in templateUrl path to template, for now the content is default app.component content

Environment

Libs
- @angular/core version: ^14.2.0
- @angular-devkit/build-angular version: ^14.2.10
- @angular-builders/custom-webpack version: 14.1.0

For Tooling issues:
- Node version: 18
- Platform:  Mac

PS: This problem looks very similar to this one

PSS: I do not rule out that this is not a bug at all, but my crooked hands :) I will be glad to receive advice or comments.

Thank you for your time
Best regards Gennady

[arturovt]

Closing since this is not related to the actual custom-webpack package.

Angular components are proceeded before Webpack runs loader. Because Angular uses thisCompilation compiler hook to setup its AOT program. Component files are read through ts.CompilerHost.getSourceFile which delegates file reads to enhanced-resolved, which then uses native fs calls, as fs.open, etc.

So you may want to augment getSourceFile with your native implementation, this will call the original implementation, but update the source file content with what you need.