[Tracking]: Angular support, second round

[zackarychapple]

What subject does this issue tracking?

Angular CLI rspack builder support

Now that we have the initial Angular support we found a few additional things that need to be added. This issue is for tracking them. Priority as shared by @valorkin.

Part two for #2099

Critical, this means the build step is working in the same fashion as the angular-cli and without these the build output is not fully functional

### Tasks
- [x] dynamic entry  - styles plugin (entry: () => ) https://webpack.js.org/configuration/entry-context/#dynamic-entry, related issue #3254
- [x] compilation.hooks.chunkAsset - 4 plugins @IWANABETHATGUY #2601
- [x] rebuildModule issue #2622 @jerrykingxyz #3496
- [x] tree-shaking is not working as expected. Bundle size is 493kb vs 212kb in Angular example issue #3062 @IWANABETHATGUY

High Priority, this means the build step is working, however the output is slightly different from the output of the angular-cli

### Tasks
- [ ] compiler.hooks.shouldEmit - i18n wip @buchslava #3258
- [x] compiler.hooks.afterResolve - dedupe plugin @IWANABETHATGUY #3060
- [ ] compilation.hooks.assetPath - 2 plugins (RemoveHashPlugin)  @dmitry-stepanenko wip #3403
- [x] compiler.hooks.shutdown - Sass plugin. @edusperoni #3234
- [ ] compilation.entries.get('main') - CommonJSUsageWarnPlugin #3517
- [x] processAssets hook uses stage number is not supported `4000` #3518
- [ ] `webpack.util.serialization.registerLoader(/^mini-css-extract-plugin\//, trueFn);` throws error `TypeError: Cannot read properties of undefined (reading 'registerLoader')` - MiniCssExtractPlugin #3519
- [x] compilation.hooks.finishModules tapPromise returns empty array for modules - StylesWebpackPlugin #3520
- [x] NormalModuleReplacementPlugin is not a constructor `new NormalModuleReplacementPlugin(new RegExp('^' + key.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&') + '$'), value).apply(compiler);` - Environment file replacement from angular.json #3522
- [ ] compilation.chunks.add is not a function - Injected scripts from angular.json #3521
- [x] processAssets hook uses custom stage number #3528

Low Priority, these are related mostly to the progress plugin and do not directly impact the output of the build

### Tasks
- [x] compiler.hooks.finishMake - progress plugin @dmitry-stepanenko #3390
- [x] compiler.hooks.buildModule - progress plugin @dmitry-stepanenko #3466
- [ ] compiler failedEntry - progress plugin #3525
- [ ] compiler addEntry - progress plugin #3524
- [ ] compiler succeedEntry - progress plugin #3523
- [x] compiler.hooks.afterCompile - progress plugin @edusperoni #3235
- [x] compiler.idle - progress plugin @edusperoni #3236
- [x] output.hashFunction - this is being used by the raw rspack & Nx version however was not in the builder list, @ahabhgk #3255

Performance Optimizations, these are things that we can do to begin to increase performance even more

• Leverage swc loader for typescript feat: support builtin swc-loader #3382

[junshengL]

@zackarychapple I performed packaging, but the code reported an error and did not package the file

[zackarychapple]

@junshengL do you have a repo example with your issue? Would be great to create one and open a separate issue, this is a tracking issue for general support.

[qyjs]

I install the latest version and start

rspack version 0.2.3

[zackarychapple]

@qyjs if you're wanting to use the Rspack build you should be just using the pnpm run build command.

[Narretz]

For the minicss extract plugin error, that happens in a block that works around a webpack error (that may or may not still exist):

https://github.com/webpack-contrib/mini-css-extract-plugin/blob/d5e540baf8280442e523530ebbbe31c57a4c4336/src/index.js#L608-L623

However, if you simply uncomment this block, the minicss extract plugin will crash a block later that doesn't seem to have anything to do with the previous block.

compiler.options.optimization.splitChunks.defaultSizeTypes is not defined

[zackarychapple]

great context @Narretz. Hopefully this gets knocked out soon.

[hardfist]

@Narretz we're gonna port mini-css-extract-plugin to rust side this quarter, hope this will solve your problem

[JounQin]

Can I use webpack@npm:rspack@latest for migrating smoothly? That will be a kiiler feature for Angular or any other projects.

[edumserrano]

When all the tasks in this issue are completed does that mean that we will get out-of-the-box support for Angular, allowing us to quickly create an Angular project using rsbuild with npm create rsbuild@latest ?

I'd like to use rspack with my Angular projects but I don't know enough to try and manually configure it from scratch so I'm waiting for the out-of-the-box support and I'm wondering if this is the right issue to track...

[zackarychapple]

When all the tasks in this issue are completed does that mean that we will get out-of-the-box support for Angular, allowing us to quickly create an Angular project using rsbuild with npm create rsbuild@latest ?

I'd like to use rspack with my Angular projects but I don't know enough to try and manually configure it from scratch so I'm waiting for the out-of-the-box support and I'm wondering if this is the right issue to track...

This issue was actually to support the pre-esbuild versions since many folks are still on pre-esbuild Angular. There is a separate task to support Rsbuild that is being worked on.

[edumserrano]

@zackarychapple I'm sorry, I'm a bit confused. If this is not the right issue I can track to understand when something like npm create rsbuild@latest will support an Angular template, then should I be able to find some issue about this on the https://github.com/web-infra-dev/rsbuild repo? I tried to look for it but can't find the:

There is a separate task to support Rsbuild that is being worked on.

[zackarychapple]

I just tagged @hardfist in our internal chats to see if they want a separate issue for the Rsbuild Angular support. Will post it here if it gets added. I agree that they should be separate since this is the webpack/Rspack angular builder compatibility.

[edbzn]

Hi there, I've created an example that builds and serves Angular using Rspack. However, given the complexity behind the Angular CLI and all the tasks it performs behind the scenes, I believe we will never achieve 100% compatibility with the base builder @angular-devkit/build-angular:browser. The Angular team treats the build specificities as an implementation detail they prefer not to expose. Consequently, it's challenging for us to integrate third-party tools requiring the same build configuration. We have to reimplement everything, which is extremely difficult and brittle. Therefore, in my opinion, we can only strive for something that closely approximates the original functionality.

As my example demonstrates that Rspack already supports all the critical functionalities for building and serving Angular, I intend to develop a third-party builder. This builder will aim to be retro-compatible with Webpack but with a different internal implementation and output that is slightly different. Not all Angular CLI features will be supported.

[zackarychapple]

@valorkin maybe you want to chime in here too. I know you did quite a bit of work already on a custom builder.