Angular 9：AppModule配置日期格式后懒加载模块日期选择器不生效

这事儿其实是Angular的注入器机制在搞鬼——懒加载模块会创建属于自己的独立注入器，不会自动继承根模块（AppModule）中注册的提供者。具体到你的场景：

当你在AppModule里配置DateAdapter和MAT_DATE_FORMATS时，这些提供者是注册在根注入器里的。但懒加载模块加载时，Angular会为它生成一个全新的子注入器。如果你的懒加载模块里也导入了MatDatepickerModule（或者相关的Material日期模块），这个模块本身会提供默认的日期适配器配置，子注入器会优先使用自己模块内的提供者，而不会去根注入器找你自定义的MY_FORMATS。

怎么解决？不用重复配置每个懒加载模块 #

你可以用Angular的forRoot()模式来封装日期配置，让所有模块共享根注入器里的提供者：

步骤1：创建一个共享配置模块 #

比如新建一个DateConfigModule，把日期相关的导入和提供者封装进去：

import { NgModule, ModuleWithProviders } from '@angular/core';
import { MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
import { DateAdapter, MomentDateAdapter } from '@angular/material-moment-adapter';
import { MY_FORMATS } from './date-formats'; // 就是你定义的那个格式常量

@NgModule({
  // 这里可以导入Material日期相关模块，比如MatDatepickerModule、MatInputModule等
})
export class DateConfigModule {
  // forRoot方法用于在根模块注册提供者
  static forRoot(): ModuleWithProviders<DateConfigModule> {
    return {
      ngModule: DateConfigModule,
      providers: [
        {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
        {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
      ]
    };
  }
}

步骤2：在AppModule里导入这个模块的forRoot() #

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    DateConfigModule.forRoot(), // 这里注册根级提供者
    // 其他根模块导入...
  ],
  declarations: [ AppComponent ... ],
  bootstrap: [AppComponent],
})
export class AppModule { }

步骤3：懒加载模块直接导入DateConfigModule（不用forRoot） #

在每个懒加载模块里，只需要导入DateConfigModule即可，不用再写提供者：

@NgModule({
  imports: [
    DateConfigModule,
    MatDatepickerModule,
    MatInputModule,
    // 其他懒加载模块需要的导入...
  ],
  declarations: [ /* 懒加载模块的组件 */ ]
})
export class LazyLoadedModule { }

这样做的原理是：forRoot()方法会把提供者注册在根注入器里，而懒加载模块导入普通的DateConfigModule时，不会重复注册提供者，而是会直接使用根注入器里已经存在的配置，自然就能让所有日期选择器（包括懒加载里的）都遵循你定义的格式了。

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