如何切换ngx-bootstrap的BSdatePicker为pt-br语言及解决加载错误

这个错误我之前踩过一模一样的坑！本质是你只想着切换locale，但Khronos（ngx-bootstrap底层的日期处理引擎）根本不知道pt-br这个locale是什么，得先把它注册进去才行。下面是一步步的解决方法：

步骤1：导入并注册pt-br locale #

首先在你的组件或者根模块里，导入需要的依赖和pt-br的locale文件：

// 比如在app.component.ts里
import { Component, OnInit } from '@angular/core';
import { BsLocaleService, defineLocale } from 'ngx-bootstrap/datepicker';
import { ptBrLocale } from 'ngx-bootstrap/locale';

然后在组件的初始化逻辑里，先注册locale，再设置使用：

export class AppComponent implements OnInit {
  constructor(private localeService: BsLocaleService) {}

  ngOnInit(): void {
    // 关键一步：先给Khronos注册pt-br的locale定义
    defineLocale('pt-br', ptBrLocale);
    // 然后告诉BsLocaleService使用这个locale
    this.localeService.use('pt-br');
  }
}

步骤2：避坑提醒 #

• 注意locale标识符的格式：一定要用pt-br（小写+横杠），别写成pt_br或者PT-BR，Khronos对这个标识符是严格匹配的，这是最容易踩的坑！
• 全局设置的方式：如果想在整个应用生效，不用每个组件都写，可以在根模块用APP_INITIALIZER来初始化：

// app.module.ts里
import { APP_INITIALIZER, NgModule } from '@angular/core';
import { BsLocaleService, defineLocale } from 'ngx-bootstrap/datepicker';
import { ptBrLocale } from 'ngx-bootstrap/locale';

// 定义初始化函数
export function setupLocale(localeService: BsLocaleService) {
  defineLocale('pt-br', ptBrLocale);
  localeService.use('pt-br');
  return () => Promise.resolve();
}

@NgModule({
  // ...其他模块配置
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: setupLocale,
      deps: [BsLocaleService],
      multi: true
    }
  ]
})
export class AppModule { }

为什么会报错？ #

你之前直接修改BsLocaleService的时候，只是告诉它要切换到pt-br，但Khronos的locale注册表里面根本没有这个选项，所以就会抛出“please load locale 'pt-br' before using it”的错误——必须先注册，再使用，顺序不能反。

内容的提问来源于stack exchange，提问作者user3042318