Могу ли я установить CUSTOM_ELEMENTS_SCHEMA глобально в Angular 17 без модуля приложения?

Недавно я перенес свой проект на Angular 17 и в рамках этого обновления удалил app.module.ts, перенеся его конфигурацию в app.config.ts. Я также перешёл с Material Angular на использование некоторых веб-компонентов.

В настоящее время я вынужден вводить в каждый компонент schemas: schemas: [CUSTOM_ELEMENTS_SCHEMA]. Поскольку я буду использовать эти веб-компоненты в каждом компоненте, я хочу включить это свойство глобально, чтобы мне не приходилось писать его для каждого компонента. Если бы я использовал app.module.ts, я знаю, что это было бы возможно, однако в моей текущей конфигурации я не уверен, как это сделать.

Для справки, вот мои два файла записей:

основной.ц:

import {appConfig} from './app/app.config';
import {bootstrapApplication} from '@angular/platform-browser';
import {AppComponent} from './app/app.component';

bootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));

приложение.config.ts:

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

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

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(),
    importProvidersFrom(CookieModule.withOptions()),
  ],
};

Я ищу решение, которое не заставит меня создавать app.module.ts.

Я попытался посмотреть, смогу ли я включить свойство «схемы» в свой объект appConfig, однако это не сработало. Я также пытался найти в Интернете эту конкретную проблему, но нашел решение только для ее включения в app.module.ts.

Похоже, что в настоящее время это не поддерживается, но звучит как разумная функция, которую вы можете запросить через их трекер проблем.

JSON Derulo 09.07.2024 09:20
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
1
65
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Используя это CUSTOM_ELEMENTS_SCHEMA, вы заставляете свое приложение игнорировать многие важные ошибки, которые помогают вам во время разработки, вместо этого просто регистрируете веб-компоненты.

import { createCustomElement } from '@angular/elements';
import { createApplication } from '@angular/platform-browser';
import { ToggleComponent } from './app/toggle/toggle.component';

(async () => {

  const app = await createApplication({
    providers: [
      /* your global providers here */
    ],
  });

  const toogleElement = createCustomElement(ToggleComponent, {
    injector: app.injector,
  });

  customElements.define('my-toggle', toogleElement);

})();

Angular Elements: веб-компоненты с автономными компонентами

Как создавать веб-компоненты из элементов Angular

Ваш подход интересен, однако это означает, что мне нужно зарегистрировать компонент Angular. Веб-компоненты Spectrum не написаны на Angular, они не зависят от платформы. Есть ли у вас обходной путь для этого случая? Вот пример веб-компонента: opensource.adobe.com/spectrum-web-comComponents/comComponents/butt‌​on

luis micu 09.07.2024 14:56

Кроме того, из официальной документации я вижу, что CUSTOM_ELEMENTS_SCHEMA допускает использование компонентов с «-» в их имени. Будет ли значительным влияние на развитие, если я позволю это?

luis micu 09.07.2024 14:58

@luismicu Да, если у вас есть опечатка в вашем компоненте или вы используете ввод и вывод и передаете неправильные типы, вы не сможете увидеть ошибки во время компиляции.

Naren Murali 09.07.2024 15:26

Таким образом, единственное жизнеспособное решение — пройти через определение веб-компонентов JavaScript и преобразовать их в компоненты Angular, чтобы затем иметь возможность их зарегистрировать?

luis micu 10.07.2024 10:03

@luismicu всем компонентам нужен угловой компонент wRapper, он будет иметь определение схемы и позволит пользователям свободно использовать веб-компоненты, в основном необходим пакет-оболочка

Naren Murali 10.07.2024 10:16

Другие вопросы по теме