Angular 19 support

[moravkin]

With what library do you have an issue?

native-federation

Reproduction of the bug/regression with instructions

After upgrading to Angular 19, application build did not pass.

ng build

Error:

TypeError: stylesheetBundler.bundleFile is not a function
at Object.transformStylesheet
(...................................\node_modules@angular\build\src\tools\esbuild\angular\compiler-plugin.js:149:72)
at MessagePort.
(....................................\node_modules@angular\build\src\tools\angular\compilation\parallel-compilation.js:42:18)
at [nodejs.internal.kHybridDispatch] (node:internal/event_target:820:20)
at MessagePort. (node:internal/per_context/messageport:23:28)

---

compiler-plugin.js (version 18.x), line 49 define function
function createCompilerPlugin(pluginOptions, styleOptions)

compiler-plugin.js (version 19.x), line 49 define function
function createCompilerPlugin(pluginOptions, stylesheetBundler)

Seems like native-federation build try to invoke function with wrong argument styleOptions. Angular 19 requires argument styleSheetBundler (which contains styleOption as inner attribute when debugging pure Angular 19 build)

Expected behavior

Build should pass without error

Versions of Native/Module Federation, Angular, Node, Browser, and operating system

Native Federation: ^18.2.2
Angular: 19.0.0
OS: Windows

Other information

No response

I would be willing to submit a PR to fix this issue

• Yes
• No

[AlanGRutter]

I have the exact same error after upgrading to Angular v19.
The error occurs in angular-esbuild-adapter.ts @ line 275 where it is referencing createCompilerPlugin. The parameters need updating for this to work with Angular v19.

[moravkin]

@AlanGRutter I do some further investigations, it seems like we need to construct object of type ComponentStylesheetBundler located at @angular\build\src\tools\esbuild\angular\component-stylesheets.js. Looking into @angular\build package maintained by Google i don't see this module exported, thus it is not visible to native-federation plugin, am I correct?

[thanhnlh]

I received below error with Module Federation after upgrading to ng19

⠙ Generating browser application bundles (phase: setup)...D:\thanhnlh\sample-mfe\fe-apps\node_modules\webpack\lib\container\ModuleFederationPlugin.js:58
throw new TypeError(
^

TypeError: The 'compilation' argument must be an instance of Compilation
at ModuleFederationPlugin.getCompilationHooks (D:\thanhnlh\sample-mfe\fe-apps\node_modules\webpack\lib\container\ModuleFederationPlugin.js:58:10)
at D:\thanhnlh\sample-mfe\fe-apps\node_modules\webpack\lib\container\HoistContainerReferencesPlugin.js:36:33
at Hook.eval [as call] (eval at create (D:\thanhnlh\sample-mfe\fe-apps\node_modules\tapable\lib\HookCodeFactory.js:19:10), :84:1)
at Hook.CALL_DELEGATE [as _call] (D:\thanhnlh\sample-mfe\fe-apps\node_modules\tapable\lib\Hook.js:14:14)
at Compiler.newCompilation (D:\thanhnlh\sample-mfe\fe-apps\node_modules\ngx-build-plus\node_modules\webpack\lib\Compiler.js:1273:30)
at D:\thanhnlh\sample-mfe\fe-apps\node_modules\ngx-build-plus\node_modules\webpack\lib\Compiler.js:1318:29
at eval (eval at create (D:\thanhnlh\sample-mfe\fe-apps\node_modules\tapable\lib\HookCodeFactory.js:33:10), :31:1)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

[AlanGRutter]

@moravkin I am not hugely familiar with the inner workings of Angular. I did find the file you referenced and I did not see it listed in the private exports or the index.ts file, perhaps Google forgot to add it to the private exports. We will need to wait for the package maintainers (@manfredsteyer) to comment on this issue.

@thanhnlh - your issue is not related to this one. I believe the correct procedure is for you to create a new issue.

[moravkin]

@AlanGRutter i agree, this should be propagated further.

As a temporary workaround to test Angular 19 with native-federation you can proceed following steps:

1. add import to angular-esbuild-adapter.js
   const cs_1 = require("..\..\..\..\@angular\\build\\src\\tools\\esbuild\\angular\\component-stylesheets.js");
2. change line 165 (where plugins are populated)
   plugins: plugins || [ (0, private_1.createCompilerPlugin)(pluginOptions.pluginOptions, new cs_1.ComponentStylesheetBundler(pluginOptions.styleOptions, builderOptions.inlineStyleLanguage)

@thanhnlh This issue was related to native-federation using esbuild builder. Your issue arise with module-federation using webpack. I suggest you to create another issue related to different micro-frontend approach

[AlanGRutter]

@moravkin - I'm not sure how to upgrade and build the project and reference it locally. Do you have an output that you can attach with instructions on how to use?

[moravkin]

@AlanGRutter i am not building plugin locally, I updated code inside node_modules/@angular_architects of my standalone angular project, then i just run ng build (or ng serve)

[manfredsteyer]

Hi,

Thanks for this pointer and the workarounds. We are working on it, and we already have a solution. However, to prepare this solution for prime time, we need a slight adjustment from the Angular CLI team. We are already in contact with them. I will keep you posted here.

[moravkin]

@AlanGRutter @manfredsteyer Today i tested stuff again. I created new angular app with ng new command (with latest angular-cli) and initiate project with native federation dynamic-host (ng g @angular-architects/native-federation:init --port 4200 --type dynamic-host). Both ng serve and ng build pass successfully without error.

[manfredsteyer]

Yes, since the latest patch version of the Angular CLI 19 everything works like before 🙌

[hal1984]

#704 I think this issue not be closed yet

[moravkin]

Reopen due to #704