My end goal is to start using a web component library, but also with the preferred outcome of not disabling component validation using CUSTOM_ELEMENTS_SCHEMA since this is an important and valuable feature of Angular. There is an issue logged within the Angular repo about making this a supported feature given that web components are now a common browser feature:
https://github.com/angular/angular/issues/12045
However, without there being an Angular supported solution, an alternative method is needed. There are various blog post which talk through this in detail, but there seems to be a difference between how the DomElementSchemaRegistry abstract class is initialised depending on whether the JIT compiler is used or whether AOT is used. When AOT is used, DomElementSchemaRegistry is initialised explicitly which disallows overriding via the standard providers array.
It appears the method to work around this is to create a new implementation of the ng class, which first of all replaces the standard implementation of DomElementSchemaRegistry before running the standard ng class code. See here under "AOT Compiler version" heading:
https://indepth.dev/posts/1121/getting-inside-angulars-element-schema-registry-mechanism
I have no doubt this would work fine using a standard Angular installation, but can anyone advise how this might be possible using the @ngtools/webpack webpack plugin? Unfortunately, webpack is an important part of our build and cannot currently be replaced.
https://www.npmjs.com/package/@ngtools/webpack