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

Question

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

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

并以

的形式导入到我的组件中

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

并收到此错误

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

Answer 1

您可以在tsconfig.js上将目标更改为es5

{
  "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

我无法找到解决此问题的真正方法，但要处理这种情况，我做了!!!

我确实创建了一个新的角度项目

ng new new-project --style=scss

并将我的所有代码（即组件，服务等）导入到新项目中，然后创建侧面导航

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

并通过指令app-version-nav

导入到组件中

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

现在侧鼻翼正常工作

Answer 3

我将目标更改为es5并为我工作。

Answer 4

如果以上答案对您没有任何帮助。尝试安装npm。可能是您从某处复制粘贴了某些程序包，而该程序包可能不在您本地。我遇到了同样的问题，对我有用。

Answer 5

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

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

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

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修复了，但是似乎那里有一个错误。

角度文档说：

  

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

它也说：

  

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

首次修复尝试（无效）

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

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

    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更新之后，此答案是否可能有助于更多有兴趣的搜索对象！