无Zone Angular独立组件的Material日期选择器在其他应用出现Provider错误

问题根源 #

Angular Material的日期选择器依赖DateAdapter和MAT_DATE_FORMATS等核心提供者，即使你的组件是standalone并导入了MatNativeDateModule，在作为自定义元素导出到非Angular应用时，这些提供者可能无法被自动注入——尤其是无Zone环境下，Angular的依赖注入逻辑会存在差异。

解决方案 #

1. 在组件中显式添加日期提供者 #

修改你的standalone组件，在providers数组中直接提供日期相关依赖，推荐使用Angular 14+提供的provideNativeDateAdapter()API，确保依赖被正确注入：

@Component({
  selector: 'app-form-field',
  standalone: true,
  imports: [FormsModule,ReactiveFormsModule, MatFormFieldModule,MatDatepickerModule, MatNativeDateModule,MatAutocompleteModule,MatIconModule,MatButtonModule,MatInputModule,MatSelectModule],
  templateUrl: './form-field.component.html',
  styleUrl: './form-field.component.scss',
  providers: [
    provideNativeDateAdapter() // 显式提供原生日期适配器
  ]
})

如果使用Angular 13及以下版本，直接添加具体的提供者：

providers: [
  { provide: DateAdapter, useClass: NativeDateAdapter },
  { provide: MAT_DATE_FORMATS, useValue: MAT_NATIVE_DATE_FORMATS }
]

2. 配置自定义元素的无Zone注入器 #

在导出自定义元素时，确保使用无Zone的注入器配置，避免Zone相关的依赖问题：

import { createCustomElement } from '@angular/elements';
import { NgZone, Injector } from '@angular/core';
import { AppFormFieldComponent } from './path/to/form-field.component';

// 创建无Zone的注入器
const injector = Injector.create({
  providers: [
    { provide: NgZone, useValue: NgZone.noop }
  ]
});

// 注册自定义元素
const FormFieldElement = createCustomElement(AppFormFieldComponent, { injector });
customElements.define('app-form-field', FormFieldElement);

3. 检查模板中的日期选择器绑定 #

确保模板中MatDatepickerToggle和MatDatepicker的关联正确，比如：

<mat-form-field>
  <input matInput [matDatepicker]="datePicker" placeholder="选择日期">
  <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
  <mat-datepicker #datePicker></mat-datepicker>
</mat-form-field>

错误的模板绑定会导致组件内部无法正确初始化依赖服务，进而触发Provider未找到的错误。

4. 确认构建配置包含Material样式 #

在angular.json的构建配置中，确保已添加Angular Material的预构建主题样式：

"styles": [
  "@angular/material/prebuilt-themes/indigo-pink.css",
  "src/styles.scss"
]

缺失样式可能间接导致组件初始化异常，引发依赖注入错误。

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