How to import Parallel Components in my Angular Project

[MikeKronewald]

Hello, I am trying to import one of the Parallel Components into my Angular Projekt.
I already imported the Components into the Module but get the following error.

How could this be solved?

[Th3S4mur41]

Hi @MikeKronewald,
great question 👍

You got the first part right...
You need to import the module first like you did for the progressBar. E.g.:

import { ProgressBar } from  @atos-parallel/components/dist/components/progressBar;

Since Parallel components are native web components, there is no need to import them in your ngModule.
You need however to tell Angular, that you are also using native web components, so that it doesn't complain about an unknown element in your template.
To do this, you just need to add CUSTOM_ELEMENTS_SCHEMA to each ngModule that uses Parallel components...
This would look like this:

import { CUSTOM_ELEMENTS_SCHEMA } from @angular/core;
import { ProgressBar } from  @atos-parallel/components/dist/components/progressBar;

// ...

@ngModule({
  declarations: [],
  imports: [/* your imports */], // Do not add **Parallel** components here
  exports: [/* your exports */],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

And that's it.
Now you should be able to use the component in you template and Angular should no longer complain

[Th3S4mur41]

Angular does not support a way to add custom schema...
Therefor using CUSTOM_ELEMENTS_SCHEMA turns all kinds of checks and validations off.

It is suggested to wrap each Parallel component into an Angular component and use the CUSTOM_ELEMENTS_SCHEMA only for those components, but not for the application. This has the advantage to keep all the Angular validation active for the App.

See the following post for more details: https://manuel-rauber.com/2021/02/23/youre-using-custom_elements_schema-wrong/

Lit is also working on an extension for its CLI to make it possible to auto generate such wrapper classes.
At the time of writing, this is available for both React and Vue, but not yet for Angular