Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ngZorro in Lazy-loaded module error: [NzModalComponent -> Overlay] No provider for Overlay!

See original GitHub issue

Reproduction link

https://stackblitz.com/#na

Steps to reproduce

Import/export NgZorroAntdModule from a Lazy-loaded module. You will get the error:

Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[NzModalComponent -> Overlay]: 
StaticInjectorError(Platform: core)[NzModalComponent -> Overlay]: 
NullInjectorError: No provider for Overlay!
Error: NullInjectorError: No provider for Overlay!

What is expected?

No error

What is actually happening?

Best guess: Lazy-loaded NgZorroAntdModule does not have access to dependency CDK Overlay.

Adding this to the main app.module fixes it:

import { OverlayModule } from '@angular/cdk/overlay';
.... 
import: [ 
...
OverlayModule

Environment	Info
ng-zorro-antd	8.0.1
Browser	Chrome Version 75.0.3770.100 (Official Build) (64-bit)

Issue Analytics

State:
Created 4 years ago
Reactions:1
Comments:9 (2 by maintainers)

Top GitHub Comments

4reactions

amiramcommented, Jul 22, 2019

My problem was that I had two cdk directories in node_modules. One in node_modules itself and one in the node_modules directory inside ng-zorro-antd directory. This was my yarn.lock:

"@angular/cdk@^8.0.0":
  version "8.0.2"
  resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-8.0.2.tgz#599b7fd06caed8cbea41f8f7874ddcea5dfc99ce"
  integrity sha512-Tv9M0vuTp7Ogk7mRiEpzBG9x5289FXe+WH0VKqN4zTzF/taTgGEuJBLDcFrwQMW0mFpGP7acVOiopgH+nClytg==
  dependencies:
    tslib "^1.7.1"
  optionalDependencies:
    parse5 "^5.0.0"

"@angular/cdk@^8.1.1":
  version "8.1.1"
  resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-8.1.1.tgz#11b11bbab7316b3fa1f9eb380211bfde0a335cc7"
  integrity sha512-5hBmhrHf9+WjGVIT8gbhT0Nh37BAjgI2TGRkt1o4qX8cG+1B6gU2MxM+CDJ7PhxSJi9lW93lq2AMuWwnRSllyg==
  dependencies:
    tslib "^1.7.1"
  optionalDependencies:
    parse5 "^5.0.0"

and I replaced that by:

"@angular/cdk@^8.1.1", "@angular/cdk@^8.0.0":
  version "8.1.1"
  resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-8.1.1.tgz#11b11bbab7316b3fa1f9eb380211bfde0a335cc7"
  integrity sha512-5hBmhrHf9+WjGVIT8gbhT0Nh37BAjgI2TGRkt1o4qX8cG+1B6gU2MxM+CDJ7PhxSJi9lW93lq2AMuWwnRSllyg==
  dependencies:
    tslib "^1.7.1"
  optionalDependencies:
    parse5 "^5.0.0"

1reaction

vthinkxiecommented, Jul 3, 2019

you can try rm -rf node_modules and reinstall your dependency

Top Results From Across the Web

Error: No provider for Overlay! - angular - Stack Overflow

I managed to eliminate this error by adding this to app.module.js: import {OVERLAY_PROVIDERS} from "@angular/material"; @NgModule({ imports: ...

ng-zorro/ng-zorro-antd - Gitter

Hello, Im getting this 'No provider for Overlay!' error while creating production build. I have listed the error and files used in app.module...

Modal | NG-ZORRO

In the popup layer component, you can obtain Modal's component instance by injecting ... when the loading is over, the modal dialog will...

ng-zorro-antd | Yarn - Package Manager

ng -zorro-antd ... An enterprise-class UI components based on Ant Design and Angular ... drawer: fix nzContentParams definition error (#7668 (0074013), ...

How to build a reusable Modal Overlay/Dialog Using Angular ...

Let us get the basics out of the way first. Assuming you have installed Angular CDK you will need to import OverlayModule into...