Applying Typescript Transforms Before the @ngtools/webpack Loader

[benwinding]

Goal

So I'm trying to apply a typescript transform to angular files BEFORE the webpack plugin AngularCompilerPlugin touches them.

Problems

• It seems that the webpack loader @ngtools/webpack ignores all previous loaders (The @ngtools/webpack loader does not fully support loader chaining) as mentioned in this comment
• It seems that the AngularCompilerPlugin directly touches the filesystem instead of using webpack's virtual filesystem as explained in this comment
• It seems custom typescript transforms are not on the road map 😞 Support custom TypeScript transformers angular#22434 (comment)

Possible Solution

• In a few blog posts and tutorials I've seen (like this one), it seems like I might be able to use the AngularCompilerPlugin's private api _transformers or _platformTransformers, but adding a transformer doesn't seem to transform the typescript BEFORE the AngularCompilerPlugin processes the typescript.

Does anyone have any suggestions? Is this even possible?

Lastly big thanks to all the contributors! 👍

Related Issues

• Support custom TypeScript transformers Angular 13: Add ability to generate esm5 bundle #22434
• Add possibility to use webpack with an alternative file system Add possibility to use webpack with an alternative file system #9089
• @ngtools/webpack: Misleading documentation & Config Refactor Proposal @ngtools/webpack: Misleading documentation & Config Refactor Proposal #9063
• Angular CLI does not apply custom webpack loader Angular CLI does not apply custom webpack loader  #18474
• Ordering issue between @ngtools/webpack + other loader Ordering issue between @ngtools/webpack + other loader #16544
• Custom typescript transformer source file changes are not applied Custom typescript transformer source file changes are not applied #16250

[alan-agius4]

@benwinding, can you please explain what you are trying to achieve and what are the problem you are facing when using TypeScript transformers?

[benwinding]

Hi @alan-agius4,
Thanks for the quick response. I'd basically like to insert my own typescript transformer plugin into the webpack build pipeline. Like this:

This transformer would convert my own type of decorators and generate angular decorators (@NgModule and @Component), and pass it to the angular compiler, which will proceed with the rest of the build. Like this:

Any ideas or suggestions on how to accomplish this goal?

Thanks for any help you can offer,
Ben

[alan-agius4]

Hi @benwinding,

That is something which is not possible and is not in the roadmap to support. See @alxhub comment in angular/angular#22434 (comment). As Alex highlighted, TypeScript transformers run before emit, hence using a typescript transformer in this case is already too late as the analysis phase would have already been finalized.

This above pattern also has the drawback that it breaks ng update code migrations because these expect that @NgModule, @Component and other Angular decorators are present in code. This would result in having to apply and fix breaking changes manually instead of using the automated code migrations offered by Angular.

[benwinding]

Hi @alan-agius4,

Thanks for the response, I can understand the current limitations.

This above pattern also has the drawback that it breaks ng update code migrations because these expect that @NgModule, @component and other Angular decorators are present in code. This would result in having to apply and fix breaking changes manually instead of using the automated code migrations offered by Angular.

See I don't believe this is a drawback. The code migrations will still work as existing @NgModule's and @Component's in the application source code will still be detected and migrated with ng update.

The generated transformed @NgModules by MyTransformerPlugin will only exist in memory during the build. Any migrations that are necessary are simply implemented in the transformer library.... so no manual migration, right? This would mean that the library would need to be versioned with angular 8.x, 9.x etc... but pretty much all angular libraries need that anyway.

Anyway, I really want to alter the Angular build process, rather than abstracting around the entire process, but it seems this is not possible yet... anyway I appreciate your quick responses and help with the matter.

Cheers,
Ben

[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.}