Angular 6：无法读取未定义的属性'runOutsideAngular'

Question

我已经nav-bar通过此命令使用cli 创建了

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

并在我的组件中导入为

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

并得到这个错误

任何有益的建议将不胜感激

Answer 1

更新到 Angular 8 后，我遇到了同样的问题。

路由的 Angular 8 延迟加载语法问题

Angular 8 已经弃用了 Angular 路由器中模块的旧延迟加载语法，即

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

有关更多信息，请参见此处：https : //angular.io/guide/deprecations#loadchildren-string-syntax

新语法是：

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

新语法工作正常ng serve，但编译它之后ng build --prod，结果失败，有点像Angular Compiler not loaded。

原因是默认情况下 angular 会提前编译 (AoT)，因此编译器不包含在最终构建中。这应该已经用 Angular 8 修复了，但似乎那里有一个错误。

Angular 文档说：

在版本 7 之前，import() 语法仅适用于 JIT 模式（使用视图引擎）。

它还说：

声明语法：遵循路由声明语法 loadChildren: 很重要，() => import('...').then(m => m.ModuleName)以允许 ngc 发现延迟加载的模块和关联的 NgModule。您可以在此处找到允许的语法结构的完整列表。这些限制将随着 Ivy 的发布而放宽，因为它将不再使用 NgFactories。

第一次修复尝试（不起作用）

禁用 AoT 编译并使用 JIT 编译，以 es215 作为 TS 目标

这不起作用，它会在运行时产生在此线程中写入的错误：

    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)

第二次修复尝试（工作）

使用 es5 作为 JIT 编译的目标

这是此线程中flor-de-cantuta-tello-sarmient的建议。它在 AoT 编译模式下对我不起作用，在那里我有关于缺少编译器的相同角度运行时消息。

但是当我ng build --prod --aot=false --build-optimizer=false使用 Typescript 目标编译我的应用程序到 es5 时，它起作用了！

在第 8 版更新后，这个答案可能对更多有角的人有所帮助！

Answer 2

您可以更改target到es5在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"
    ]
  }
}