Ошибка компонентов ng-zorro datepicker в функциональных модулях Lazy Loaded - PullRequest
Новая
       37

Ошибка компонентов ng-zorro datepicker в функциональных модулях Lazy Loaded

2 голосов
/ 23 мая 2019

Ant Design NG-ZORRO довольно прост, если он импортирован в основной app.module

Мой вариант использования: я хочу загрузить ngZorro в UiLibraryModule (который устанавливает провайдеров Zorro и реэкспортирует NgZorroAntdModule) и импортировать его в Feature1Module и пропустить его импортирование в app.module (для более легкого vendor.js)

Если ng-zorro не включен в app.module, яполучить эту ошибку при вызове компонента datepicker ng-zorro: StaticInjectorError(AppModule)[DatePipe]: ..... NullInjectorError: No provider for DatePipe!

Если UiLibraryModule также импортирован в app.module, все работает нормально (но, естественно, с огромным vendor.js)

Проблема (лучшая догадка): ngZorro работает правильно только при импорте в основной app.module.Но это лишает смысла ленивую загрузку Feature1Module.

Любые предложения о том, как загрузить ng-zorro исключительно из лениво загруженного модуля?

Ответы [ 3 ]

2 голосов
/ 24 мая 2019

Я являюсь членом команды ng-zorro. :)

Честно говоря, это ошибка. Это связано с тем, что DatePicker использует службу под названием DateHelperService, которая зависит от DatePipe. 

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

На данный момент вы можете предоставить DatePipe в AppModule. Мы исправим это в следующей версии. Спасибо, что нашли эту ошибку. ?

0 голосов
/ 06 июня 2019

Я столкнулся с той же проблемой и с последней версией (ng-zorro-antd@7.5.0)

Я импортирую / экспортирую NgZorroAntdModule из UiLibraryModule, в котором есть провайдеры: [], а также конфигурацию forRoot для установки провайдеров i18n для Zorro. Однако ни один из этих методов не работает, поскольку компоненты даты по умолчанию имеют значение "zh-cn", и вы получаете ошибку Missing locale data for the locale "zh-cn"!

Вот как я решил это прямо сейчас:

В запись вашего лениво загруженного модуля / первый загруженный / общий / компонент оболочки , добавьте следующее: 

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

Недостатком является то, что вам, возможно, придется повторить это для нескольких функциональных модулей.

EDIT: [DatePipe] error отсортировано в 7.5.0+ кстати. Приведенное выше решение относится к ошибке i18n (если для ngZorro i18n через модуль Shared / Lazy-Loaded задан языковой стандарт, по-прежнему используется значение «zh-CN»). Это обходной путь для этого.

0 голосов
/ 23 мая 2019

Начиная с версии 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.

...