Components: ngZone not intialized in MatSidenav (MatDrawer) while using es2015+

Created on 26 Mar 2018  Â·  15Comments  Â·  Source: angular/components

Bug, feature request, or proposal:

I think this is a BUG.

What is the expected behavior?

Just initialize it, instead of a undefined one.

What is the current behavior?

Template:

<mat-sidenav-container>
    <mat-sidenav>
        ...
    </mat-sidenav>
</mat-sidenav-container>

tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es2015",
    "paths": {
        "@api": [
            "@api/"
        ],
        "@core": [
            "@core/"
        ],
        "@view": [
            "@view/"
        ]
    },
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

ERROR:

TypeError: Cannot read property 'runOutsideAngular' of undefined
    at new MatDrawer (sidenav.js:212)
    at new MatSidenav (sidenav.js:852)
    at createClass (core.js:10370)
    at createDirectiveInstance (core.js:10217)
    at createViewNodes (core.js:11674)
    at callViewAction (core.js:12108)
    at execComponentViewsAction (core.js:12017)
    at createViewNodes (core.js:11702)
    at callViewAction (core.js:12108)
    at execComponentViewsAction (core.js:12017)

Compiling with es5 will not encounter this issue.

What are the steps to reproduce?

Just modify the tsconfig.json to change the target to es2015.

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

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

[universonic@KAMIKAZE reproduce]$ ng version

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / â–³ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.7.3
Node: 6.11.4
OS: darwin x64
Angular: 5.2.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.2.4
@angular/cli: 1.7.3
@angular/flex-layout: 5.0.0-beta.13
@angular/material-moment-adapter: 5.2.4
@angular/material: 5.2.4
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.6.2
webpack-bundle-analyzer: 2.11.1
webpack: 3.11.0

Is there anything else we should know?

Most helpful comment

@mmalerba Please, reopen this issue. Using AOT works very bad with ng serve.

All 15 comments

@mmalerba Any updates?

es2015 currently works in AOT mode only, see https://github.com/angular/material2/issues/8284#issuecomment-354274079

same issue

ng serve --aot --port xxxx worked for me... FINALLY, if you only i knew earlier that es2015 only works in aot atm :D

Nevermind --aot is not a solution, works for like 4 refreshes then it throws a ton of errors, after rerunning ng serve it works again for a few minutes

@mmalerba Please, reopen this issue. Using AOT works very bad with ng serve.

Same issue.

Same issue.

same issue

same issue

same issue

Same here

Same here

`Angular CLI: 7.1.4
Node: 10.14.1
OS: win32 x64
Angular: 7.1.4
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package Version

@angular-devkit/architect 0.11.3
@angular-devkit/build-angular 0.11.3
@angular-devkit/build-optimizer 0.11.3
@angular-devkit/build-webpack 0.11.3
@angular-devkit/core 7.1.3
@angular-devkit/schematics 7.1.4
@angular/cdk 7.2.0
@angular/material 7.2.0
@ngtools/webpack 7.1.3
@schematics/angular 7.1.4
@schematics/update 0.11.4
rxjs 6.3.3
typescript 3.1.6
webpack 4.23.1`

Got scared to death while struggling on launch deadline. --aot worked. Still not sure what happened to regular ng serve

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

Was this page helpful?
0 / 5 - 0 ratings

Related issues

lfroment0 picture lfroment0  Â·  108Comments

maku picture maku  Â·  59Comments

jeffbcross picture jeffbcross  Â·  126Comments

jelbourn picture jelbourn  Â·  132Comments

abdulkareemnalband picture abdulkareemnalband  Â·  165Comments