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

[lichangfeng]

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

[jSchez]

Hello there,

I think that your problem may be related to the npm_link. For an unknown reason we cannot follow the traditional way of working with npm.

If you are thinking on splitting the application, at this moment, I would suggest you to go for a monorepo approach.

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.

That message means that the compiler has found @angular/core inside your dependency. Can you try deleting the node_modules folder in your library ?

Best regards;

[alan-agius4]

Yes, when you link you might need to add paths inside your application tsconfig due to the issue that @jSchez mentioned above.

More info here;
https://github.com/angular/angular-cli/wiki/stories-linked-library

[jSchez]

@alan-agius4 Thanks for the link, glad to read that step by step the issue with libs and npm_link is being solved : )

[alan-agius4]

@jSchez, can you explain why are you using npm link?

Does your application reside outside of your libraries angular workspace? As if your application and library reside in the same workspace you don't need to do npm link and everything should work out of the box. As when you generate a library it will add tsconfig paths so that it can be resolved from the application and/or other libraries within the workspace.

[lichangfeng]

@alan-agius4 ,I want another angular workspace use this library。Maybe I should try npm publish

[lichangfeng]

@alan-agius4 but this man has a same question ,he use npm publish

[lichangfeng]

@alan-agius4 The strange thing is when i remove BrowserModule from mylib.module.ts imports[], it works.

[alan-agius4]

You can use npm pack if you want to test your library locally without the
need to publish.

https://docs.npmjs.com/cli/pack

On Tue, 14 Aug 2018 at 08:38, lichangfeng [e-mail] wrote:

@alan-agius4 https://github.com/alan-agius4 but this man has a same
question, he use npm publish

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/angular-cli/issues/11883#issuecomment-412770022,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AQv-Wv0ur6kE2yurd5fqDsUU8fRyus1dks5uQnCDgaJpZM4V7rlM
.

[alan-agius4]

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.

[lichangfeng]

@alan-agius4 , I use *ngIf in the library. So when I use CommonModule instead of BrowserModule, then console show a error:
ng:///MylibModule/MylibComponent.ngfactory.js:12 ERROR Error: StaticInjectorError(AppModule)[NgIf -> ViewContainerRef]:
StaticInjectorError(Platform: core)[NgIf -> ViewContainerRef]:
NullInjectorError: No provider for ViewContainerRef!
at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (vendor.js:69630)
at resolveToken (vendor.js:69868)
at tryResolveToken (vendor.js:69812)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (vendor.js:69709)
at resolveToken (vendor.js:69868)
at tryResolveToken (vendor.js:69812)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (vendor.js:69709)
at resolveNgModuleDep (vendor.js:76944)
at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (vendor.js:77632)
at resolveDep (vendor.js:77997)

[alan-agius4]

Do you have the BrowserModule imported in the application?

[lichangfeng]

Yes, the test-mylib application(who linked mylib) has imported BrowserModule

[alan-agius4]

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.

[lichangfeng]

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

[alexeagle]

Sounds like this is resolved?

[undervane]

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.

I might be missing something... Where these tsconfig options should be? In the project that is consuming the conflictive library, or in the library itself? 🤔

[cice]

I was struggling with this as well. I temporarily changed the dest option of ng-packagr to /path-to-my-application/node_modules/my-library and started ng-packagr in watch mode. Works like a charm.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}