Summary
我创建了一个 Angular 6 库,但当我尝试在创建它的项目之外使用它时,出现错误。这看起来有很多代码,但它主要是由 CLI 生成的样板文件。
最小工作测试用例
我使用 Angular 6 CLI 创建了一个非常基本的库。
ng new mylib
cd mylib
ng generate library example
ng build --prod example
然后我可以添加<lib-example></lib-example>
to src/app/app.component.html
, run ng serve
,并查看示例组件按预期工作。
接下来我编辑projects/example/src/lib/example.component.ts
添加一个*ng-if="true"
to the <p>
tag.
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
, so my 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 { }
Rebuild:
ng build --prod example
我的组件还没有做任何有用的事情,但只要我在创建它的同一个项目中使用它,它就可以工作。
最小的非工作测试用例
让我们尝试在不同的应用程序中使用该库。我首先生成一个新应用程序,该应用程序与包含该库的应用程序位于同一目录中。
ng new myapp
然后我添加<lib-example></lib-example>
to 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)
我究竟做错了什么?