ngZone: 'noop' option doesn't work with Angular Material components

[chasemgray]

Bug, feature request, or proposal:

What is the expected behavior?

Buttons, sidenav, selects, input fields, etc. should function normally when ngZone: 'noop' is specified.

What is the current behavior?

If you enabled ngZone: 'noop' most Angular Material components break.

What are the steps to reproduce?

Launching a an app which uses material components using .bootstrapModule(AppModule, {ngZone: 'noop'}); results in components that do not work properly.

What is the use-case or motivation for changing an existing behavior?

Angular added in 'noop' so that apps that control their own change detection using OnPush can disable the extra overhead of zones. Is the material team planning to support this?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 5.0, Material 5.0

Is there anything else we should know?

[jelbourn]

This is on our roadmap but we don't have an ETA currently

[bulash]

same problem, may be status changed or we can hope for some ETA?

[jelbourn]

We're still in the same state where Angular core would need additional features for us to be able to do this.

[jnlmmln]

Any updates about this issue?

[adrianpiesiak]

I'd also love to get an update on this one. I really like using materials but now it seems that it's a no-go when high performance is a must and noop is used :/

[claudiuconstantin]

News here?

[mucbits]

Any update on this?

[SerkanSipahi]

Any Update?

[ms-dosx86]

Hello?

[DrewLandgraveCbsi]

@jelbourn, Any update on this?

Currently I'm not able to use @angular/elements using @angular/components. When I try to use these components in another angular project it complains that zone.js has detected that ZoneAwarePromise (window|global).Promise has been overwritten.

[DrewLandgraveCbsi]

So for anyone running into my issue, where you're trying to build an @angular/elements component that also uses @angular/components(material) and zone is complaining, I found a fix.

So what you're going to need to do is build your @angular/elements project and concat your built files while EXCLUDING the polyfills. Here's the scripts in my package.json

"build": "ng build --prod --output-hashing=none",
"package-es5": "bash -c 'cat dist/angular-topic-control-with-service-worker/{runtime-es5,styles-es5,scripts,main-es5}.js > dist/angular-topic-control-with-service-worker/package-es5.js'",
"package-es2015": "bash -c 'cat dist/angular-topic-control-with-service-worker/{runtime-es2015,styles-es2015,scripts,main-es2015}.js > dist/angular-topic-control-with-service-worker/package-es2015.js'",
"bundle": "npm run build && npm run package-es5 && npm run package-es2015",

I run npm run bundle. Then you'll take the package*.js files and add them to your other angular app. I put my in a src/custom-elements folder.

In your angular.json you'll add the package to the scripts array

"scripts": [
    {
        "input": "node_modules/document-register-element/build/document-register-element.js"
    },
    "src/custom-elements/package-es2015.js"              
]

Then build your app and it shouldn't complain about the zone issue anymore. Granted this does not fix the problem with noop zones, however it does allow you to build custom elements with angular material. I successfully did it with MatInputs and MatFlatTree's

[ievgennaida]

I would like to use IVY with markDirty, but I cannot while material components are not working.

[Jordan-Hall]

@chrisguttandin to use positionStrategy without zone if you call "updatePosition" after attaching it works fine

    const config = new OverlayConfig({
      positionStrategy: this.overlay
        .position()
        .flexibleConnectedTo(this.dropdown)
        .withPositions([
          {
            originX: 'start',
            originY: 'bottom',
            overlayX: 'start',
            overlayY: 'top',
          },
        ]).withPush(true),
    });

    this.fusilliOverlayRef = this.overlay.create(config);
    this.fusilliOverlayRef.backdropClick().subscribe(() => {
      this.fusilliOverlayRef.dispose();
    });

    this.fusilliOverlayRef.attach(
      new ComponentPortal(TravellersComponent, this.viewContainerRef)
    );

    this.fusilliOverlayRef.updatePosition();
  }```

[chrisguttandin]

Thanks a lot @Jordan-Hall. That is very helpful information.

[Jordan-Hall]

Another note. if you happen to use angular lifecycle hooks. Make sure you manually call ngOninit... Just spent ages with a dev fixing his code to finally notice he used lifecycle

[jon9090]

ngrx and rx-angular give us a way to create application without zonejs. I wish that material remove zonejs so I can get rid of this library in my application. this is only thing is missing.

@jelbourn its 2022, any news? it's in the plan of the team?

[ywarezk]

I wrote this library to help with angular zoneless apps.
The library will also make material work in zoneless mode (and will also make every 3rd party that does not support zoneless work) link to the library: az-zoneless. The library also expose events that will trigger ChangeDetectorRef.detectChanges.
For example:

<button (azClick)="doSomething()">this click works in zoneless since it calls ChangeDetectorRef.detectChanges()</button>

[haskelcurry]

Any updates on this?

[DibyodyutiMondal]

I noticed that for the most part, angular material works fine without zone. Except in cases like snackbar or dialog. The animation/position are wrong. I think it's because they rely on change detection to apply correct position after the thing has opened, but no zone = no change detection.

But, we can now use signals to do it, right? Pretty please?

[Casimodo72]

Any news on this matter? "In Angular 17, signals were released as stable (except for the effect() function)". Can we at least expect material to move forward in the foreseeable future (months not years)? Would be great to have some updated info in order to make decisions on our side.

[Jordan-Hall]

For Tabs I've found using @rx-angular/cdk

    import { RX_RENDER_STRATEGIES_CONFIG, RxStrategyProvider } from '@rx-angular/cdk/render-strategies';

    private strategies = inject(RX_RENDER_STRATEGIES_CONFIG);
    constructor(private strategyProvider: RxStrategyProvider, private cdr: ChangeDetectorRef) {}
    
    tick() {
    this.strategyProvider.scheduleCD(this.cdr, { strategy: this.strategies.primaryStrategy});
  }

Lastly in the HTML you can use the <mat-tab-group (focusChange)="tick()" this will update the component. Only thing not figured out is fixing the inital focus

[Casimodo72]

The lack of transparency about whether Material will go Signals in the foreseeable future makes me believe that we get stuck with it as it is and zone.js will still be needed in the coming years. My context is that I want Angular to transpile to native async/await - which is seemingly not possible if zone.js is still in the game.

[jelbourn]

Angular material and cdk will both adopt signals when support is further along. It's a long-term goal for the team to ensure that all of Angular's first-party offerings are signal-based with no zonejs dependency. It's a long road, though, as it involves many breaking changes that need gradual rollouts, backwards compatibility, and migration tooling.