[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

Preview Give feedback

1. dynamic entry - styles plugin (entry: () => ) https://webpack.js.org/configuration/entry-context/#dynamic-entry, related issue Dynamic imports make rspack crash when cache is enabled in production mode #3254
2. compilation.hooks.chunkAsset - 4 plugins @IWANABETHATGUY compilation.hooks.chunkAsset #2601
3. rebuildModule issue [Feature Request]: compilation.rebuildModule does not exist #2622 @jerrykingxyz feat: support compilation.rebuildModule #3496
4. tree-shaking is not working as expected. Bundle size is 493kb vs 212kb in Angular example issue example angular bundle size is a lot bigger than webpack #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

Preview Give feedback

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

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

Tasks

Preview Give feedback

1. compiler.hooks.finishMake - progress plugin @dmitry-stepanenko feat: add finishMake hook #3390
2. compiler.hooks.buildModule - progress plugin @dmitry-stepanenko feat: add buildModule hook #3466
3. compiler failedEntry - progress plugin compiler.hooks.failedEntry hook missing #3525
4. compiler addEntry - progress plugin compiler.hooks.addEntry hook missing #3524
5. compiler succeedEntry - progress plugin compiler.hooks.succeedEntry hook missing #3523
6. compiler.hooks.afterCompile - progress plugin @edusperoni feat: add afterCompile hook #3235
7. compiler.idle - progress plugin @edusperoni feat: add cache idle hooks #3236
8. output.hashFunction - this is being used by the raw rspack & Nx version however was not in the builder list, @ahabhgk feat: hashFunction, hashDigest, hashDigestLength, and hashSalt and refactor lots of code #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.