ng-zorro datepicker 组件在延迟加载功能模块中的错误答案

【问题标题】：ng-zorro datepicker components' error in Lazy Loaded feature modulesng-zorro datepicker 组件在延迟加载功能模块中的错误
【发布时间】：2019-05-23 05:23:26
【问题描述】：

如果将 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 有什么建议吗？

【问题讨论】：

标签： angular7 ng-zorro-antd

【解决方案1】：

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

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

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

目前，您可以在AppModule 中提供DatePipe。我们会在下一个版本中解决这个问题。感谢您发现此错误。 ?

【讨论】：

首先，非常感谢您快速而恰当的回复。我试过了，但是每当延迟加载的模块加载并且日期选择器出现时，我都会得到"InvalidPipeArgument: 'Missing locale data for the locale "zh-cn".' for pipe 'DatePipe'"。
PS：我在 UiLibraryModule 中为 ngZorro 设置提供程序和 i18n
当我关注这个时，zorro 默认为“zn-cn”语言环境。您能告诉我如何为这个特定用例将延迟加载模块的语言环境设置为 en 吗？
与注入器的层次结构有关。你可以尝试将所有 i18n 的东西移到 app 模块中。
顺便说一句，我们在最近的 PR 中解决了这个问题。你也可以等待。

【解决方案2】：

我也面临与最新版本相同的问题 (ng-zorro-antd@7.5.0)

我正在从一个 UiLibraryModule 导入/导出 NgZorroAntdModule，该模块具有 providers:[] 以及一个 forRoot 配置来为 Zorro 设置 i18n 提供程序。但是，这些方法都不起作用，因为日期组件默认为 "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”）。这是一种解决方法。

【讨论】：

这为我解决了这个问题，我只是在我的单元测试中遇到了这个问题，但这有效。

【解决方案3】：

从 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 */

导入多个组件的 CSS 文件可能会导致代码冗余，因为组件的样式文件与 TypeScript 文件一样具有依赖关系。

【讨论】：

感谢您的回答。我的用例实际上有点不同。我需要整个模块，但是，当由延迟加载模块加载并且使用任何日期组件时，它会给出错误（没有 datePipe 提供程序）。
DatePipe 是@angular/common 管道类之一，zorro 使用它来处理日期格式。也许你应该导入DatePipe？
当然。但是错误是由zorro产生的。我可以将 DatePipe 导入我的 UiLibraryModule，但错误仍然是由 zorro 的日期组件生成的。

【解决方案4】：

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

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

和之前的每个：

registerLocaleData(zh);

【讨论】：