ng-zorro datepicker 组件在 Lazy Loaded 功能模块中的错误

Question

Ant Design 的 NG-ZORRO 如果在内核中导入的话还是挺直接的 app.module

我的用例：我想在 UiLibraryModule 中加载 ngZorro（它设置 Zorro 的提供者并重新导出 NgZorroAntdModule）并将其导入到 Feature1Module 中，并跳过它在 app.module 中的导入（对于更轻的 vendor.js）

如果 ng-zorro 未包含在 app.module 中，我在调用 ng-zorro datepicker 组件时收到此错误： StaticInjectorError(AppModule)[DatePipe]: ..... NullInjectorError: No provider for DatePipe!

如果 UiLibraryModule 也在 app.module 中导入，一切正常（但自然地，有一个巨大的 vendor.js）

问题（最佳猜测）： ngZorro 仅在导入核心 app.module 时才能正常工作。但这违背了让 Feature1Module 延迟加载它的全部目的。

关于如何完全从延迟加载模块加载 ng-zorro 有什么建议吗？

Answer 1

从 7.3.0 版本开始，您可以导入组件的模块和样式文件以使用该组件。比如你只想使用Button组件，可以导入NzButtonModule而不是NgZorroAntdModule，导入Button的样式文件而不是ng-zorro-antd.css .

在您的模块中：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { NzButtonModule } from 'ng-zorro-antd';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    CommonModule,
    NzButtonModule
  ]
})
export class YourModule { }

在style.css中：

@import "~ng-zorro-antd/style/index.min.css"; /* Import basic styles */
@import "~ng-zorro-antd/button/style/index.min.css"; /* Import styles of the component */

如果要导入多个组件，建议使用less而不是CSS。在 styles.less:

@import "~ng-zorro-antd/style/entry.less"; /* Import basic styles */
@import "~ng-zorro-antd/button/style/entry.less"; /* Import styles of the component */

Importing CSS files of several components may result in code redundancy because style files of components have dependency relationships like TypeScript files.

Answer 2

我是 ng-zorro 团队的成员。 :)

坦率地说，这是一个错误。这是因为 DatePicker 使用名为 DateHelperService 的服务，该服务依赖于 DatePipe.

@Injectable({
  providedIn: 'root',
  useFactory: DATE_HELPER_SERVICE_FACTORY,
  deps: [Injector, [new Optional(), NZ_DATE_CONFIG], DatePipe]
})

目前，您可以在 AppModule 中提供 DatePipe。我们会在下一个版本中修复它。感谢您发现此错误。

Answer 3

我在最新版本中也遇到了同样的问题 (ng-zorro-antd@7.5.0)

我是 importing/exporting 来自 UiLibraryModule 的 NgZorroAntdModule，它有 providers:[] 还有一个 forRoot 配置来为 Zorro 设置 i18n providers。但是，这些方法中的 none 作为日期组件默认为 "zh-cn" 工作，您会收到错误 Missing locale data for the locale "zh-cn"!

这是我现在的解决方法：

在您的延迟加载模块的entry/first-loaded/common/shell组件中，添加以下内容：

    import { en_US, NzI18nService } from 'ng-zorro-antd';
    ..
    constructor(private i18n: NzI18nService) {
    }
    ....
    ngOnInit() {
         this.i18n.setLocale(en_US);
    }

缺点是您可能必须对多个功能模块重复此操作。

编辑： [DatePipe] error 在 7.5.0+ 中排序。上面的解决方案是针对 i18n 错误的（当通过 Shared/Lazy-Loaded 模块为 ngZorro i18n 设置语言环境时，它仍然默认为 "zh-CN"）。这是解决方法。

Answer 4

如果您在单元测试中遇到此问题，请执行以下操作：

import { registerLocaleData } from '@angular/common'; import zh from '@angular/common/locales/zh';

和 beforeEach:

registerLocaleData(zh);

ng-zorro datepicker 组件在 Lazy Loaded 功能模块中的错误

ng-zorro datepicker components' error in Lazy Loaded feature modules

angular7

ng-zorro-antd