Angular 17无应用模块时如何全局配置CUSTOM_ELEMENTS_SCHEMA？

在Angular 17的standalone应用架构中，确实无法直接在ApplicationConfig里添加schemas属性，但可以通过provideCompilerOptions提供者来全局配置编译器选项，从而一次性启用CUSTOM_ELEMENTS_SCHEMA，无需在每个组件中重复声明。

修改你的app.config.ts： #

import { ApplicationConfig, importProvidersFrom, provideCompilerOptions } from '@angular/core';
import { provideRouter } from '@angular/router';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { routes } from './app.routes';
import { provideHttpClient } from '@angular/common/http';
import { CookieModule } from 'ngx-cookie';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(),
    importProvidersFrom(CookieModule.withOptions()),
    // 全局配置CUSTOM_ELEMENTS_SCHEMA
    provideCompilerOptions({
      schemas: [CUSTOM_ELEMENTS_SCHEMA]
    })
  ],
};

说明： #

• provideCompilerOptions是Angular提供的用于配置全局编译器选项的API，它允许你在standalone应用中设置原本只能在NgModule的schemas数组里配置的内容。
• 配置完成后，所有组件都会自动识别Web Components标签，无需再逐个添加schemas: [CUSTOM_ELEMENTS_SCHEMA]。
• 确保你的Web Components已经在应用启动前正确注册（比如在main.ts中导入对应的组件脚本），否则Angular仍会抛出未知组件的错误。

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