Summary
I created an Angular 6 library, but I get an error when I try to use it outside of the project in which it was created. This looks like a lot of code, but it's mostly boilerplate generated by the CLI.
Minimal Working Test Case
I created a very basic library with the Angular 6 CLI.
ng new mylib
cd mylib
ng generate library example
ng build --prod example
I can then add <lib-example></lib-example>
to src/app/app.component.html
, run ng serve
, and see the example component works as expected.
Next I edit projects/example/src/lib/example.component.ts
to add an an *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() {
}
}
To get the ngIf
directive, I import BrowserModule
, so my projects/example/src/lib/example.module.ts
looks like this:
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
My component doesn't do anything useful yet, but it works as long as I use it within the same project I used to create it.
Minimal Non-Working Test Case
Let's try using the library in a different app. I start by generating a new app that lives in the same directory as the app that contains the library.
ng new myapp
Then I add <lib-example></lib-example>
to myapp/src/app/app.component.html
and import the library in myapp/src/app/app.module.ts
, so that it looks like this.
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 Message
When I browse to the app, I get the following error in the console.
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)
What am I doing wrong?
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.
Have you tried to add the following in your tsconfig.json
file:
"paths": {
"@angular/*": [
"./node_modules/@angular/*"
]
},
Please note the path is ./node_modules
, some suggest ../node_modules
, the latter did not work for me.
Hope this will help someone. It took me a very long time to get to the solution. Thanks to: https://github.com/angular/angular-cli/issues/11883
来源:https://stackoverflow.com/questions/51601974/nullinjectorerror-no-provider-for-ngzone-angular-6-library