2

如果在核心 app.module 中导入 Ant Design 的 NG-ZORRO，则非常简单

我的用例：我想在 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 有什么建议吗？

4

4 回答 4

3

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

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

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

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

于 2019-05-24T02:26:41.557 回答
1

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

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

于 2019-06-06T07:50:05.997 回答
0

从版本 7.3.0 开始，您可以导入组件的模块和样式文件以使用该组件。例如，如果你只想使用Button组件，你可以用 importNzButtonModule代替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。在 style.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 文件一样具有依赖关系。

于 2019-05-23T08:13:26.687 回答
0

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

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

和之前：

registerLocaleData(zh);
于 2021-01-03T23:17:38.790 回答