custom loader's output ignored in append mode

Describe the bug When running @angular-builders/custom-webpack with a custom loader pointed to a single file, the loader’s output appears to be ignored (it does get called and executes) when the merge strategy is set to “append” or when left blank.

To Reproduce Minimal repo: https://github.com/mralbobo/angular-webpack-builder-repro Freshly cli generated, with the following notable modifications/ additions:

• extra-webpack.config.js
• angular.json
• preprocess-analytics-loader.js
• src/app/AnalyticsService.ts
• app.component.ts

The two “real” files have been extremely cut down to having the loader just replace the file with essentially nonsense. There are two test cases:

• run (serve) as is, observe that the app does not error despite the intent of replacing the contents of the file with nonsense
• modify the merge strategy to “prepend”, observe that the the app does throw an error related to the files content being changed to nonsense

Expected behavior The expectation is that the loader will run, replace the contents of the file with the string of f’s and the app should throw an error when it tries to run the created function. In actuality, the function runs successfully.

Builder:

• @angular-builders/custom-webpack
• The version of the builder: 8.2.0

Libraries

• angular-devkit/build-angular: 0.802.2

Extra

• target file is .ts

[just-jeb]

Sure, here are a few URLs:

• Common webpack config
• Browser webpack config
• Typescript webpack config

Now, I think the real issue here is that they don’t really use loaders for Typescript. The entity that processes TS is AngularCompilerPlugin. I have no idea why it works with prepend, and why is that different from append when the real TS compilation happens in AngularCompilerPlugin but I’d say this is the way you should take.
You can hook into transformers by pushing your own transformer.
To add your transformer into _transformers array you’ll probably have to do something like this in your webpack config:

  const index = config.plugins.findIndex(p => p instanceof 
  AngularCompilerPlugin.AngularCompilerPlugin);
  config.plugins[index]._transformers.push(YourTrasnformerHere);
  return config;

In this example I pushed it at the end but here is where you choose when this transformer is applied. You can squeeze it in between or run before all the transformers, whatever you prefer. I think it should work.
To learn more about how this stuff works look into the code of AngularCompilerPlugin.

[just-jeb]

Update: Guys from Angular team say that the right way is to use platformTransformers. It’s actually all the same in terms of execution (they are just added to the _transformers array). I think the reason it is considered the right approach is that platformTransformers are provided in options while _transformers are private property.
In case you’re using platformTransformers you should be able to use non-functional custom config:

module.exports = {
	module: {
		plugins: [
                     new AngularCompilerPlugin({platformTransformers: [YourTrasnformerHere]})
                ]
	}
};

Notice though these are pushed after certain transformers.

Also, Angular is still using a single loader for TS files which works in conjunction with compiler plugin (this is most probably the reason for the mess with append and prepend).