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