custom DomElementSchemaRegistry

import { DomElementSchemaRegistry, ElementSchemaRegistry, SchemaMetadata } from '@angular/compiler';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
/**
 * As we are using the custom tags of the si-design-system,
 * we are forced to turn off template validation completely (applying CUSTOM_ELEMENTS_SCHEMA)
 * Writing a custom SchemaRegistry could be a solution to retain proper validation.
 * Still, there's no feasable solution at the moment
 * More info https://stackoverflow.com/questions/69881434/how-to-add-a-custom-schema-to-angular
 */
export class SiDomElementSchemaRegistry extends DomElementSchemaRegistry {
  constructor() {
    super();
  }

  hasElement(tagName: string, schemaMetas: SchemaMetadata[]): boolean {
    const elementExists = tagName.includes('si-') || super.hasElement(tagName, schemaMetas);
    console.log('[SiDomElementSchemaRegistry::hasElement]', tagName, elementExists);

    return elementExists;
  }

  hasProperty(tagName: string, propName: string, schemaMetas: SchemaMetadata[]): boolean {
    return tagName.includes('si-') || super.hasProperty(tagName, propName, schemaMetas);
  }
}

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic()
  .bootstrapModule(AppModule, {
    /**
     * TODO: This line gets ignored completely...
     * If we remove CUSTOM_ELEMENTS_SCHEMA from the modules,
     * we get error messages everywhere for the <si-... tags...
     **/
    providers: [{ provide: ElementSchemaRegistry, useClass: SiDomElementSchemaRegistry, deps: [] }],
  })
  .catch((err) => console.error(err));