angular-cli: ERROR : "NullInjectorError: No provider for NgZone!" when import a library.

Bug Report or Feature Request (mark with an `x`)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Command (mark with an `x`)

- [ ] new
- [ ] build
- [ ] serve
- [ ] test
- [ ] e2e
- [x] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Versions

node v10.8.0 npm 6.2.0 os win10 angular 6.1.2

Repro steps

1.run commands: ng new mylib-demo, cd mylib-demo, ng generate library mylib 2.cd projects/mylib/src/lib ,edit mylib.module.ts, imports BrowserModule. 3.cd …/…/…/…/, ng build mylib, npm link dist/mylib 4.ng new test-mylib, npm link mylib, edit app.module.ts, imports MylibModule. ng serve -o, then browser console show the error: NullInjectorError: No provider for NgZone!

there is a same issue:

The log given by the failure

1.compiled error: WARNING in …/mylib-demo/node_modules/@angular/core/fesm5/core.js 4996:15-36 Critical dependency: the request of a dependency is an expression

WARNING in …/mylib-demo/node_modules/@angular/core/fesm5/core.js 5008:15-102 Critical dependency: the request of a dependency is an expression i ｢wdm｣: Compiled with warnings.

2.the browser console error: 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:1062) at resolveToken (core.js:1300) at tryResolveToken (core.js:1244) at StaticInjector.push…/node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1141) at resolveToken (core.js:1300) at tryResolveToken (core.js:1244) at StaticInjector.push…/node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1141) at resolveNgModuleDep (core.js:8376) at _createClass (core.js:8429) at _createProviderInstance (core.js:8393)

Desired functionality

Mention any other details that might be useful

1.mylib demo: mylib.module.ts import { NgModule } from '@angular/core'; import { MylibComponent } from './mylib.component'; import {BrowserModule} from '@angular/platform-browser'; @NgModule({ imports: [ BrowserModule ], declarations: [MylibComponent], exports: [MylibComponent] }) export class MylibModule { } 2.test-mylib: app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import {MylibModule} from 'mylib'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, MylibModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 18 (1 by maintainers)

Most upvoted comments

@alan-agius4 ,YES, it works. But it will be ./node_modules/@angular/* not ../ Thank you very mach. When you come to china, I would like to invite you to dinner.

+13

charlee2025 on Aug 14, 2018

BrowserModule shouldn’t be used in a library. Use CommonModule intead.

BrowserModule is intended to be used only at an application level and imported in the root module.

alan-agius4 on Aug 14, 2018

And have you set up the below paths in your application tsconfig?

{
  "compilerOptions": {
    // ...
    // Note: these paths are relative to `baseUrl` path.
    "paths": {
      "@angular/*": [
        "../node_modules/@angular/*"
      ]
    }
  }
}

That said, to me this looks more of some missing configuration rather than a bug.