空注入错误:没有NgZone的提供程序!(角度6库)

我创建了一个Angular 6库,但是当我试图在创建它的项目之外使用它时,我得到了一个错误。这看起来像很多代码,但主要是由CLI生成的样板文件。

最小工作测试用例

ng new mylib 
cd mylib
ng generate library example
ng build --prod example

我可以再加上 <lib-example></lib-example> 到 src/app/app.component.html ng serve ,并查看示例组件按预期工作。

下一个我编辑 projects/example/src/lib/example.component.ts *ng-if="true" 致 <p> 标签。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'lib-example',
  template: `
    <p *ng-if="true"> <!-- this line was changed -->
      example works!
    </p>
  `,
  styles: []
})
export class ExampleComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

为了得到 ngIf 指令,我导入 BrowserModule ,所以我的 projects/example/src/lib/example.module.ts 看起来像这样:

import { NgModule } from '@angular/core';
import { ExampleComponent } from './example.component';
import { BrowserModule } from '@angular/platform-browser'; // added

@NgModule({
  imports: [
    BrowserModule // added
  ],
  declarations: [ExampleComponent],
  exports: [ExampleComponent]
})
export class ExampleModule { }

重建:

ng build --prod example

我的组件还没有做任何有用的事情,但是只要我在创建它的同一个项目中使用它,它就会工作。

让我们尝试在其他应用程序中使用库。我首先生成一个新的应用程序,它与包含库的应用程序位于同一目录中。

ng new myapp 

<lib example></lib example> myapp/src/app/app.component.html 并将库导入 myapp/src/app/app.module.ts ,所以看起来像这样。

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component";
import { ExampleModule } from "../../../mylib/dist/example"; // added

@NgModule({
  declarations: [AppComponent],
  imports: [
     BrowserModule,
     ExampleModule // added
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

错误消息

当我浏览应用程序时,控制台中出现以下错误。

Error: StaticInjectorError(AppModule)[ApplicationRef -> NgZone]: 
  StaticInjectorError(Platform: core)[ApplicationRef -> NgZone]: 
    NullInjectorError: No provider for NgZone!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:1060)
    at resolveToken (core.js:1298)
    at tryResolveToken (core.js:1242)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1139)
    at resolveToken (core.js:1298)
    at tryResolveToken (core.js:1242)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1139)
    at resolveNgModuleDep (core.js:8377)
    at _createClass (core.js:8430)
    at _createProviderInstance (core.js:8394)

我做错什么了?