Zoneless SSR doen't build when using file polyfill

[martin-yumsto]

Which @angular/* package(s) are the source of the bug?

compiler-cli

Is this a regression?

No

Description

I'm trying to go zoneless for my SSR angular app with hydration.

This condition seems to cause difficulties to migrate to zoneless for any SSR app that uses file based polyfills:

angular-cli/packages/angular/build/src/tools/esbuild/application-code-bundle.ts

Line 175 in d622e59

if (!isZonelessApp(options.polyfills)) {

I guess you are aware of the issue, since there is a todo on the condition that feels too generic:

angular-cli/packages/angular/build/src/tools/esbuild/utils.ts

Line 470 in d622e59

export function isZonelessApp(polyfills: string[] | undefined): boolean {

Basically it adds zone.js/node import for all the builds that have file polyfill.

Minimal repro would be:

angular.json:
"polyfills": ["@angular/localize/init", "polyfills.ts"]

polyfills.ts
(window as any).global = window; // Amplify

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

Please provide the environment you discovered this bug in (run ng version)

ngular CLI: 19.0.0
Node: 20.17.0
Package Manager: pnpm 8.14.1
OS: darwin arm64

Angular: 19.0.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, localize, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker, ssr

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1900.0
@angular-devkit/build-angular   19.0.0
@angular-devkit/core            19.0.0
@angular-devkit/schematics      19.0.0
@schematics/angular             19.0.0
rxjs                            7.5.7
typescript                      5.6.3

Anything else?

No response

[e-oz]

I didn't get it. My zoneless SSR app builds just fine with v19.

[martin-yumsto]

@e-oz do you use file based polyfill ?

I just noticed I forgot to include the error log so it's here:

✘ [ERROR] Could not resolve "zone.js/node"

    angular:polyfills-server:angular:polyfills-server:2:7:
      2 │ import 'zone.js/node';

Basically for the server side package build the condition that detects whether it should build zone-based or zoneless app is very generic and it matches "zone.js" or any other js/ts file inside the polyfills array. So I suppose even empty file specified in that array inside angular.json build will cause the error.

[e-oz]

polyfills.ts
(window as any).global = window; // Amplify

I guess that this thing alone will throw an exception on the server side.

In my polyfills I have only link to localize.

[aparzi]

Hi @e-oz and @martin-yumsto,
I can't reproduce the reported bug, my zoneless app seems to compile fine am I doing something wrong?

[martin-yumsto]

Hi @e-oz and @martin-yumsto, I can't reproduce the reported bug, my zoneless app seems to compile fine am I doing something wrong?

Do you use poly-fills and ssr too ?

EDIT: precision - do you use pollyfils that match following regex /\.[mc]?[jt]s$/.test(p)) ?

[aparzi]

@martin-yumsto I created a new project with Angular 19 with experimental-zoneless option. I included ssr and insert manually polyfills. am I missing something? if you want add me more info to replicate the bug so in case to work on it. Thanks, at your disposal

[martin-yumsto]

@aparzi

Odd, because I can still see the line of code in master, that caused the issue. What polyfills did you use to replicate ?

I'll also double check at the same time

[aparzi]

@martin-yumsto

I have inserted these conf into my project test (Angular 19 + ssr) in the Angular.json: "polyfills": ["@angular/localize/init", "polyfills.ts"]

In polyfills.ts I have inserted:
(window as any).global = window; // Amplify

maybe I'm doing something wrong to replicate the case?

[martin-yumsto]

@martin-yumsto

I have inserted these conf into my project test (Angular 19 + ssr) in the Angular.json: "polyfills": ["@angular/localize/init", "polyfills.ts"]

In polyfills.ts I have inserted: (window as any).global = window; // Amplify

maybe I'm doing something wrong to replicate the case?

Hey @aparzi,

that's indeed how I faced it and still do:

✘ [ERROR] Could not resolve "zone.js/node"

    angular:polyfills-server:angular:polyfills-server:2:7:
      2 │ import 'zone.js/node';
        ╵        ~~~~~~~~~~~~~~

  You can mark the path "zone.js/node" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

Once I add polyfills.ts build starts to import zone for some reason.

That being said, I'm only running on v19, not v19.1. It introduced some change that breaks my code and I didn't take a look yet why.

Let me upgrade first to v19.1 or v19.2 and check whether it still happens.

[aparzi]

@martin-yumsto
I have inserted these conf into my project test (Angular 19 + ssr) in the Angular.json: "polyfills": ["@angular/localize/init", "polyfills.ts"]
In polyfills.ts I have inserted: (window as any).global = window; // Amplify
maybe I'm doing something wrong to replicate the case?

Hey @aparzi,

that's indeed how I faced it and still do:

✘ [ERROR] Could not resolve "zone.js/node"

    angular:polyfills-server:angular:polyfills-server:2:7:
      2 │ import 'zone.js/node';
        ╵        ~~~~~~~~~~~~~~

  You can mark the path "zone.js/node" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

Once I add polyfills.ts build starts to import zone for some reason.

That being said, I'm only running on v19, not v19.1. It introduced some change that breaks my code and I didn't take a look yet why.

Let me upgrade first to v19.1 or v19.2 and check whether it still happens.

Hi @martin-yumsto
ok I'll wait for your updates after you've upgraded to the latest versions