Angular 6: Cannot read property 'runOutsideAngular' of undefined

问题

I have created nav-bar using cli through this command

ng g @angular/material:material-nav --name=version-nav

and imported in my component as

<app-version-nav></app-version-nav>

and got this error

any helpful suggestion would be highly appreciated

回答1:

You can change target to es5 in tsconfig.js

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

回答2:

The same problem came up for me after updating to Angular 8.

Problem with Angular 8 Lazy Loading Syntax for Routes

Angular 8 has deprecates the old lazy loading syntax for modules in angular router, namely

const routes: Routes = [{
    path: 'lazy',
    // The following string syntax for loadChildren is deprecated
    loadChildren: './lazy/lazy.module#LazyModule'
}];

See here for more information: https://angular.io/guide/deprecations#loadchildren-string-syntax

The new syntax is:

const routes: Routes = [{
    path: 'lazy',
    // The new import() syntax
    loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
}];

The new syntax works fine in ng serve, but after compiling it with ng build --prod, the result fails with something like Angular Compiler not loaded.

The reason is that angular is compiled ahead of time (AoT) per default, so the compiler is not included in the final build. This should have been fixed with Angular 8, but it seems like there is a bug there.

The Angular Docs say:

Prior to version 7, the import() syntax only works in JIT mode (with view engine).

It also says:

Declaration syntax: It's important to follow the route declaration syntax loadChildren: () => import('...').then(m => m.ModuleName) to allow ngc to discover the lazy-loaded module and the associated NgModule. You can find the complete list of allowed syntax constructs here. These restrictions will be relaxed with the release of Ivy since it'll no longer use NgFactories.

First fixing attempt (not working)

Disable AoT compile and use JIT Compile with es215 as TS target

This does not work, it instead produces the error written about in this thread at runtime:

    ERROR TypeError: Cannot read property 'runOutsideAngular' of undefined
    at new Fg (main-es2015.1dd434fee5a42300d69f.js:1)
    at new Bg (main-es2015.1dd434fee5a42300d69f.js:1)
    at Yu (main-es2015.1dd434fee5a42300d69f.js:1)
    at Ou (main-es2015.1dd434fee5a42300d69f.js:1)
    at Yg (main-es2015.1dd434fee5a42300d69f.js:1)
    at Ug (main-es2015.1dd434fee5a42300d69f.js:1)
    at $g (main-es2015.1dd434fee5a42300d69f.js:1)
    at Yg (main-es2015.1dd434fee5a42300d69f.js:1)
    at Ag (main-es2015.1dd434fee5a42300d69f.js:1)
    at Object.Qg [as createRootView] (main-es2015.1dd434fee5a42300d69f.js:1)

Second fixing attempt (working)

Use es5 as target with JIT compilation

This is the suggestion of flor-de-cantuta-tello-sarmient in this thread. It did not work for me in AoT compiling mode, there I had the same angular runtime message about the missing compiler.

But as I compiled my app with ng build --prod --aot=false --build-optimizer=false with Typescript target to es5, it worked! 🎉

May this answer be helpful to more searching angular folks after the Version 8 update!

回答3:

I change the target to es5 and works for me.

回答4:

I couldn't find the real-solution to this problem but to handle this situation what I did!!!

I did create a new angular project

ng new new-project --style=scss

and imported all my code i.e. components, services etc in new-project and then created the side-nav

ng g @angular/material:material-nav --name=version-nav

and imported into the component through directive app-version-nav

<app-version-nav></app-version-nav>

Now side-navis working properly

回答5:

If nothing worked for you by above answers. Try npm install. May be you have copy pasted some packages from somewhere and It may not be present in your local. It worked for me as I had the same issue.

来源：https://stackoverflow.com/questions/52166617/angular-6-cannot-read-property-runoutsideangular-of-undefined