Using webcomponent in Angular

1

Hi to all,
is there a guide indicating how to use webcomponents in angular (I need @openremote/core and @openremote/rest)?
I need to connect an app 8webapplication) written in angular with openremote rest api using webcomponent.
I try in this way but with no luck, the compiler show this error:

Error: Module not found: Error: Package path . is not exported from package /webc-test/node_modules/@openremote/core (see exports field in /webc-test/node_modules/@openremote/core/package.json)

I follow this steps to integrate or webcomponent

  • npm install @openremote/core
  • in app.modeule.ts insert this code
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
. . . . .
 schemas: [
    CUSTOM_ELEMENTS_SCHEMA // Tells Angular we will have custom tags in our templates
  ],
  • in app.component.ts
import manager, {Auth, Manager} from "@openremote/core";
. . . . . 
manager.init({
      managerUrl: "http://localhost",
      keycloakUrl: "http://localhost/auth",
      auth: Auth.KEYCLOAK,
      autoLogin: false,
      realm: "main",
      configureTranslationsOptions: (options) => {
        options.lng = "it"; // Change initial language to italian
      }
    }).then((success) => {
      if (success) {
        if (manager.authenticated) {
          console.log('Auth true');
        }
      }
    });

Has anyone been successful with integrating webcomponents into angular?

2

Hi,

We haven’t published our components to npm for some time but can look to do this in the next couple of days.

Any of our components that don’t start with or- prefix aren’t web components just regular javascript so you should be able to consume core and rest without issue in any web app framework/library.

Are you using a bundler like webpack or just trying to serve ES modules?

3

Hi,
Rich thank you for your reply!
No I’m not using webpack; I create a simply angular scaffolding application and try to import @openremote/core to connect to my openremote instance.
But during compilation I’ve this error:

Error: Module not found: Error: Package path . is not exported from package /webc-test/node_modules/@openremote/core (see exports field in /webc-test/node_modules/@openremote/core/package.json)
4

Hi @Rich,
can you tell me when will you be able to update the packages on NPM? otherwise I cannot continue (the packages use some old API version) to evaluate the integration of an Angular application with openremote which still seems to us an excellent and valid product (congratulations for the work done!).
Thanks.

5

Hi,

Apologies I have been a bit busy with other things. I will see if someone else can pick this up next week as I’m away for the week.

Otherwise I’ll have to take a look in about 10 days.