Skip to content

ngZone not intialized in MatSidenav (MatDrawer) while using es2015+ #10567

Closed
@universonic

Description

@universonic

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?

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions