NullInjectorError: Нет поставщика для NgZone! (Библиотека Angular 6)

Question

Резюме

Я создал библиотеку Angular 6, но у меня появляется ошибка, когда я пытаюсь использовать ее за пределами проекта, в котором она была создана. Это выглядит как много кода, но это в основном шаблон, сгенерированный CLI.

Минимальный рабочий тестовый набор

Я создал очень простую библиотеку с 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, // added
     ExampleModule
  ],
  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)

Что я делаю неправильно?

Answer 1

Ну, я не знаю почему. Но проблема с импортом BrowserModule, Не импортируйте его в свой библиотечный модуль, и он должен работать.

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

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

Я был в этом в течение очень долгого времени и удалил импорт в моем модуле библиотеки один за другим. Это было BrowserModule,

Я думаю, что это должно ответить на ваш другой вопрос.

Answer 2

Вы пытались добавить следующее в свой tsconfig.json файл:

"paths": {
      "@angular/*": [
        "./node_modules/@angular/*"
      ]
    },

Обратите внимание, что путь ./node_modulesнекоторые предлагают ../node_modules, последнее у меня не сработало.

Надеюсь, это кому-то поможет. Мне потребовалось очень много времени, чтобы найти решение. Спасибо: https://github.com/angular/angular-cli/issues/11883