NullInjectorError: No provider for NgZone! (Angular 6 library)

Question

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?

Luxate

Try importing CommonModule in AppModule. – Corso

Thanks. That sounds reasonable as ngIf is defined in CommonModule, but importing the dependency didn't change anything. Nor did it help to import into ExampleModule. If I'm not mistaken, CommonModule is included in BrowserModule so adding it explicitly has no effect. – Luxate

When I build the app I'm getting warnings from Webpack. I'm guessing there's a common cause, but I'm not sure. #51615115 – Luxate

That is pulling my hair for the 6 days now. can it be related to AOT and UMD? I am not sure – Ciliolate

Answer 1

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.

Ciliolate

Thanks! Tried that but I'm still getting the same error. – Luxate

Sorry, I mean do not import it in the example module. I just updated the answer – Ciliolate

The BrowserModule is needed for *ngIf. Without it, the project doesn't compile. – Luxate

You can use CommonModule. See #49663364 – Sarcoid

@Patrick: I guess swapping CommonModule for BrowserModule to enable *ngIf (not *ng-if as seen in your code) to be recognised in the Library HTML didn't have any effect on the "no provider for NgZone" warning/error. – Balk

Answer 2

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

Denticle

This definitely did the trick for me with Webpack 4 and Angular 8. – Chifforobe