[Feature] Specify Custom Element Tags in Schemas

[lucasbasquerotto]

I'm submitting a...

[x] Feature request

Current behavior

Today, when using custom elements (webcomponents) in Angular it will complain that it is not an Angular element, to add in a NgModule or use CUSTOM_ELEMENTS_SCHEMA.

I can make it work with CUSTOM_ELEMENTS_SCHEMA, but I then I don't receive validation errors when I type component names wrong (even angular ones). The price to pay is just too high.

Expected behavior

I ask for a feature to allow defining specific custom elements, like:

export const MY_SCHEMAS = CUSTOM_ELEMENTS_SCHEMA.for([
    'my-component-1',
    'my-component-2',
    'my-component-3',
]);

and use it in any NgModule like:

@NgModule({
    ...
    schemas: [MY_SCHEMAS],
})

Then, if I write a custom component name like my-conponent-1, I would receive an error, just like what happens now with angular components.

It would also validate angular components names (just like it already does today, but even when using custom elements).

What is the motivation / use case for changing the behavior?

Receive validations when using custom elements when writing in the Editor/IDE (with red squiggles) and also when building (with AOT), just like it validates today when not using custom elements.

Environment

Angular version: 6

Other Information:

There was a similar discussion in the following issue #11251 (although the issue was not about it specifically).

In this post (in the issue above):

#11251 (comment)

a member from the Angular Team said:

Element declared in your NgModule schemas prop - support is rather limited for now and this mostly offer a all or nothing filter. It will be improve in the next releases.

(later there are more posts saying about it, to allow a finer grained control over schemas and the like, including the last post, before the issue was locked)

But the post is from 2016, almost 2 years ago. I tried to find other issues about it (like some issue that is tracking this feature) but haven't found any.

So, will this be implemented in Angular? Can I have some sort of feedback about how things are going related to this implementation?

In any case, thanks for the great work! Angular6 had many great features, like tree-shakeable providers and using RxJS v6. Waiting for Ivy now :)

[trotyl]

Duplicate of #12045

[pkozlowski-opensource]

Yep, this is duplicate of #12045 - thnx @trotyl !

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}