ng serve throws ERR_INVALID_ARG_VALUE when using @angular-architects/native-federation 21

[berkon]

Command

serve

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Since upgrading to Angular 21 and @angular-architects/native-federation 21, I'm getting this error:

node:internal/modules/cjs/loader:1962
      throw new ERR_INVALID_ARG_VALUE('filename', filename,
            ^

TypeError [ERR_INVALID_ARG_VALUE]: The argument 'filename' must be a file URL object, file URL string, or absolute path string. Received './.postcssrc.json'
    at createRequire (node:internal/modules/cjs/loader:1962:13)
    at StylesheetPluginFactory.initPostcss (C:\Users\************\node_modules\@angular\build\src\tools\esbuild\stylesheets\stylesheet-plugin-factory.js:154:78) {
  code: 'ERR_INVALID_ARG_VALUE'
}

I'm using Node.js v22.17.1

When downgrading to @angular-architects/native-federation 20.x.y the bug disappears. But according to the error message above, I don't think that this is a native federation issue. I was able to track down the issue to line 227 in file https://github.com/angular/angular-cli/blob/main/packages/angular/build/src/tools/esbuild/stylesheets/stylesheet-plugin-factory.ts

const postCssPluginRequire = createRequire(dirname(configPath) + '/');

It looks like createRequire() does not accept relative paths anymore in Angular 21. When I replace "dirname" by "resolve" it seems to work fine (as far as I could see).

Minimal Reproduction

N.a.

Exception or Error

node:internal/modules/cjs/loader:1962
      throw new ERR_INVALID_ARG_VALUE('filename', filename,
            ^

TypeError [ERR_INVALID_ARG_VALUE]: The argument 'filename' must be a file URL object, file URL string, or absolute path string. Received './.postcssrc.json'
    at createRequire (node:internal/modules/cjs/loader:1962:13)
    at StylesheetPluginFactory.initPostcss (C:\Users\************\node_modules\@angular\build\src\tools\esbuild\stylesheets\stylesheet-plugin-factory.js:154:78) {
  code: 'ERR_INVALID_ARG_VALUE'
}

Your Environment

┌───────────────────────────────────┬───────────────────┬───────────────────┐
│ Package                           │ Installed Version │ Requested Version │
├───────────────────────────────────┼───────────────────┼───────────────────┤
│ @angular-devkit/build-angular     │ 21.0.4            │ 21.0.4            │
│ @angular/animations               │ 21.0.6            │ 21.0.6            │
│ @angular/cdk                      │ 21.0.5            │ 21.0.5            │
│ @angular/cli                      │ 21.0.4            │ 21.0.4            │
│ @angular/common                   │ 21.0.6            │ 21.0.6            │
│ @angular/compiler                 │ 21.0.6            │ 21.0.6            │
│ @angular/compiler-cli             │ 21.0.6            │ 21.0.6            │
│ @angular/core                     │ 21.0.6            │ 21.0.6            │
│ @angular/forms                    │ 21.0.6            │ 21.0.6            │
│ @angular/platform-browser         │ 21.0.6            │ 21.0.6            │
│ @angular/platform-browser-dynamic │ 21.0.6            │ 21.0.6            │
│ @angular/router                   │ 21.0.6            │ 21.0.6            │
│ @angular/service-worker           │ 21.0.6            │ 21.0.6            │
│ rxjs                              │ 7.8.2             │ 7.8.2             │
│ typescript                        │ 5.9.3             │ 5.9.3             │
│ zone.js                           │ 0.15.1            │ 0.15.1            │
└───────────────────────────────────┴───────────────────┴───────────────────┘

Anything else relevant?

No response