Question

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

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

如果app.module中不包含ng-zorro，则当调用ng-zorro datepicker组件时出现此错误： StaticInjectorError(AppModule)[DatePipe]: ..... NullInjectorError: No provider for DatePipe!

如果还将UiLibraryModule也导入到app.module中，则一切正常（但自然而然，使用大型vendor.js）

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

关于如何从延迟加载的模块中完全加载ng-zorro的任何建议吗？

Answer 1

我是ng-zorro小组的成员。：）

坦率地说，这是一个错误。这是因为DatePicker使用称为DateHelperService的服务，该服务取决于DatePipe。

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

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

Answer 2

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

如果要导入多个组件，建议减少使用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文件的依赖关系。

Answer 3

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

我正在从UiLibraryModule导入/导出NgZorroAntdModule，该模块具有provider：[]和forRoot配置，以为Zorro设置i18n提供程序。但是，这些方法都不能用作默认为"zh-cn"的日期组件，并且会出现错误Missing locale data for the locale "zh-cn"！

这是我现在解决的方法：

在您的延迟加载模块的入口/首次加载/通用/ shell组件中，添加以下内容：

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

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

编辑： [DatePipe] error在7.5.0+ btw中排序。上面的解决方案是针对i18n错误的（当通过共享/延迟加载的模块为ngZorro i18n设置语言环境时，它仍默认为“ zh-CN”）。这是一种解决方法。

Answer 4

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

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

和 beforeEach：

registerLocaleData(zh);

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

4 个答案: