Недавно я перенес свой проект на 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.
Используя это 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. Веб-компоненты Spectrum не написаны на Angular, они не зависят от платформы. Есть ли у вас обходной путь для этого случая? Вот пример веб-компонента: opensource.adobe.com/spectrum-web-comComponents/comComponents/button
Кроме того, из официальной документации я вижу, что CUSTOM_ELEMENTS_SCHEMA допускает использование компонентов с «-» в их имени. Будет ли значительным влияние на развитие, если я позволю это?
@luismicu Да, если у вас есть опечатка в вашем компоненте или вы используете ввод и вывод и передаете неправильные типы, вы не сможете увидеть ошибки во время компиляции.
Таким образом, единственное жизнеспособное решение — пройти через определение веб-компонентов JavaScript и преобразовать их в компоненты Angular, чтобы затем иметь возможность их зарегистрировать?
@luismicu всем компонентам нужен угловой компонент wRapper, он будет иметь определение схемы и позволит пользователям свободно использовать веб-компоненты, в основном необходим пакет-оболочка
Похоже, что в настоящее время это не поддерживается, но звучит как разумная функция, которую вы можете запросить через их трекер проблем.