Solvedangular 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 { }

19 Answers

✔️Accepted Answer

@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.

Other Answers:

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.

More Issues: