Angular 6: Cannot read property 'runOutsideAngular' of undefined

Question

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

Answer 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"
    ]
  }
}

Answer 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!