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?

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.

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