question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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?

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:18
  • Comments:15 (1 by maintainers)

github_iconTop GitHub Comments

3reactions
deinokcommented, Oct 25, 2018

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

1reaction
hopsinatcommented, Aug 22, 2018

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular Material mat-sidenav-content not showing
After checking the rendered template it seems that your code lacks the routing precision. Your app-routing.
Read more >
UNPKG - @angular/material
@angular/material/bundles/material-sidenav.umd.min.js.map. Version: ... Throws an exception when two MatDrawer are matching the same position.
Read more >
Sidenav - Angular Material
This error is thrown if you have more than one sidenav or drawer in a given container with the same position . The...
Read more >
@angular/material | Yarn - Package Manager
Investigating and fixing reported regressions for the new components launched in v15; Creating a new more flexible theming API in collaboration with MDC...
Read more >
node_modules/@angular/material/bundles/material.umd.js.map
An error occurred while loading commit signatures ... transformDrawer],\n host: {\n 'class': 'mat-drawer mat-sidenav',\n 'tabIndex': '-1',\n ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found