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

[thinkdj]

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) |

---

This is very similar to the case: https://stackoverflow.com/questions/56268515/ng-zorro-datepicker-components-error-in-lazy-loaded-feature-modules/

[thinkdj]

Similar Issue: https://github.com/NG-ZORRO/ng-zorro-antd/issues/3487

[thinkdj]

Related: Also getting this error:
Uncaught (in promise): Error: No component factory found for NzMessageContainerComponent. Did you add it to @NgModule.entryComponents? Error: No component factory found for NzMessageContainerComponent. Did you add it to @NgModule.entryComponents?

[vthinkxie]

out doc site and all out project are built with ng-zorro and lazy loading, they are working fine, you have to provide an valid repro link because we have no clue why you meet the error
the issue related is a bug and we have resolved it already
the error you report looks like your cdk version or angular version does not match, plz check your package.json or node_modules I guess

[zorro-bot[bot]]

Hello @thinkdj. Please provide a online reproduction by forking this link https://stackblitz.com/edit/ng-zorro-antd-start or a minimal GitHub repository.
Issues labeled by Need Reproduce will be closed if no activities in 7 days.

你好 @thinkdj, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击 此处 创建一个 stackblitz 或者提供一个最小化的 GitHub 仓库
被标记为 Need Reproduce 的 issue 7 天内未跟进将会被自动关闭。

[thinkdj]

out doc site and all out project are built with ng-zorro and lazy loading, they are working fine, you have to provide an valid repro link because we have no clue why you meet the error
the issue related is a bug and we have resolved it already
the error you report looks like your cdk version or angular version does not match, plz check your package.json or node_modules I guess

@vthinkxie I was on Angular 7.x/ngZorro7.x and manually migrated to 8.x and then upgraded zorro. I have no reference to cdk in my main package.json. Could you please give me pointers on how to fix such an upgrade case ?

[vthinkxie]

you can try rm -rf node_modules and reinstall your dependency

[thinkdj]

@vthinkxie @hsuanxyz Reproduction Link:
https://stackblitz.com/edit/ng-zorro-lazyloaded-test

Clarification: Exporting the module from another one is causing my issues. NOT lazy-loading.

[thinkdj]

Update: I am guessing one of my modules is not importing the UiModule and hence my errors. I am closing this for the time being and sorting it out.

[amiram]

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"