angular - NullInjectorError:没有 NgZone 的提供者!(Angular 6 库)
问题描述
概括
我创建了一个 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
以将 an 添加*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
指令,我 import 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)
我究竟做错了什么?
解决方案
Well, I don't know why. But the problem is with importing the BrowserModule
. Do not import it into your library module and it should work.
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 { }
I have been in this for a very long time and removed the imports in my library module one by one. It was the BrowserModule
.
I think this should answer your other question.
推荐阅读
- python - Jinja2 在生成 HTML 文档时请求图像 url?
- javascript - 如何在给定键名的情况下从枚举中获取值
- powerbi - 在 power BI 中使用 ISO 年和 ISO 周计算同比变化
- sql - 我想用亚马逊雅典娜按日期总结 http 状态
- c# - 从 C# 中的 WPF 数据网格更新 SQL Server
- python - 我可以在 Python Django 中访问其他 MySQL 数据库而无需访问其模型吗?
- sql - 如何在具有不同时间戳的表中汇总日期
- sympy - Sympy:用平方和根化简小复合分数
- java - 配置 schema.registry.url 的值 io.confluent.kafka.schemaregistry.client.MockSchemaRegistryClient@4788c0a1 无效
- r - 将样本随机分成 3 个代表组