ngZorro错误Missing locale data for the locale zh-cn

最新推荐文章于 2023-09-23 12:54:13 发布

胖鹅68

最新推荐文章于 2023-09-23 12:54:13 发布

阅读量2.7k

点赞数 3

分类专栏： angular6、ionic4、typescript、rx

本文链接：https://blog.csdn.net/hbiao68/article/details/106873072

版权

angular6、ionic4、typescript、rx 专栏收录该内容

46 篇文章

订阅专栏

本文详细介绍了如何在使用ng-zorro-antd的日期选择器组件时解决国际化显示问题，通过在main.ts文件中引入并注册Angular语言包，确保日期格式正确显示。同时，提供了在app.module.ts中引入多个ng-zorro-antd模块的完整示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

问题

在这里插入图片描述

原因

nz-date-picker 的部分 locale 来自于 Angular 自身的国际化支持，需要在 main.ts文件中引入相应的 Angular 语言包。

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

在app.module.ts中的完整例子（包含ng-zorro其他模块的引入）

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule }   from '@angular/forms';
import {HttpClientModule} from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzLayoutModule } from 'ng-zorro-antd/layout';
import { NzTabsModule } from 'ng-zorro-antd/tabs';
import { NzTableModule } from 'ng-zorro-antd/table';
import { NzMenuModule } from 'ng-zorro-antd/menu';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzDividerModule } from 'ng-zorro-antd/divider';
import { NzInputModule } from 'ng-zorro-antd/input';
import { NzMessageModule } from 'ng-zorro-antd/message';
import { NzSelectModule } from 'ng-zorro-antd/select';
import { NzFormModule } from 'ng-zorro-antd/form';
import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
import { NzGridModule } from 'ng-zorro-antd/grid';
import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TemperatureIndexComponent } from './pages/main/temperature-index/temperature-index.component';
import { AtmosphericIndexComponent } from './pages/main/atmospheric-index/atmospheric-index.component';
import { LoginComponent } from './pages/login/login.component';
import { MainComponent } from './pages/main/main.component';
import * as echarts from 'echarts';
import { NgxEchartsModule } from 'ngx-echarts';
import { HumidityIndexComponent } from './pages/main/humidity-index/humidity-index.component';
import { CloudIndexComponent } from './pages/main/cloud-index/cloud-index.component';
import { WindIndexComponent } from './pages/main/wind-index/wind-index.component';
import { RainIndexComponent } from './pages/main/rain-index/rain-index.component';
import { registerLocaleData } from '@angular/common';
// import {WeatherService} from '@service/weather.service'
import zh from '@angular/common/locales/zh';
import { MapWeatherComponent } from './components/map-weather/map-weather.component';
import { TableWeatherComponent } from './components/table-weather/table-weather.component';
import { ChartWeatherComponent } from './components/chart-weather/chart-weather.component';

registerLocaleData(zh);

@NgModule({
  declarations: [
    AppComponent,
    TemperatureIndexComponent,
    AtmosphericIndexComponent,
    LoginComponent,
    MainComponent,
    HumidityIndexComponent,
    CloudIndexComponent,
    WindIndexComponent,
    RainIndexComponent,
    MapWeatherComponent,
    TableWeatherComponent,
    ChartWeatherComponent
  ],
  imports: [
    NzGridModule,
    NzCheckboxModule,
    NzFormModule,
    NzDatePickerModule,
    NzSelectModule,
    NzMessageModule,
    NzInputModule,
    NzDividerModule,
    NzIconModule,
    NzMenuModule,
    NzTableModule,
    NzTabsModule,
    NzLayoutModule,
    NzButtonModule,
    NgxEchartsModule.forRoot({
      echarts
    }),
    BrowserAnimationsModule,
    HttpClientModule,
    FormsModule,
    BrowserModule,
    AppRoutingModule
  ],
  // 各种服务提供商——定义服务
  providers: [
    // WeatherService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }