Skip to content

Importing zone.js/node and using modern sass compiler throws an error with Vite/AnalogJS #61090

@brandonroberts

Description

@brandonroberts

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

zone.js

Is this a regression?

Yes

Description

In an AnalogJS project when using Vite 6.x, the modern sass compiler is used. When using SSR and commonly, Angular Material, the sass compiler throws an error. I traced it back to zone.js patching the Promise which is being used inside the sass-embedded package used for sass compilation.

Steps to reproduce:

  1. Clone the repo
  2. Run npm install.
  3. Run npx vite or npx ng serve.
  4. Visit the local development URL.
  5. Note the error shown above.

Workarounds:
Use Zoneless change detection and not load zone.js/node in the main.server.ts file.

Or

Configure Vite to use the legacy sass compiler

/// <reference types="vitest" />

import { defineConfig } from 'vite';
import analog from '@analogjs/platform';

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => ({
  build: {
    target: ['es2020'],
  },
  css: {
    preprocessorOptions: {
      scss: {
        api: 'legacy' // fixes the error, but displays deprecation warnings
      }
    }
  },
  resolve: {
    mainFields: ['module'],
  },
  plugins: [
    analog(),
  ],
}));

Using the modern sass compiler out of the box is preferred.

Please provide a link to a minimal reproduction of the bug

https://github.com/brandonroberts/analog-angular-material-zonejs

Please provide the exception or error you saw

Image

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

Angular CLI: 19.2.10
Node: 22.14.0
Package Manager: npm 10.9.2
OS: darwin arm64

Angular: 19.2.9
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1902.10
@angular-devkit/build-angular   19.2.10
@angular-devkit/core            19.2.10
@angular-devkit/schematics      19.2.10
@angular/build                  19.2.10
@angular/cdk                    19.2.14
@angular/cli                    19.2.10
@angular/material               19.2.14
@schematics/angular             19.2.10
rxjs                            7.8.2
typescript                      5.8.3
zone.js                         0.15.0

Anything else?

Using Analog 1.16.0

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: zonesIssues related to zone.js

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions