Using components of one aurelia app as web components in another aurelia app

Help Requests
#1

Hi everyone,

I would like to use the components of one aurelia app as web components for other aurelia apps, e.g: My first app “Chat” presents a couple of web components to be used in other projects and my second app “platform” integrates these components.

I found in another discussion (Sharing components between projects) that the general consensus was to use aurelia-plugins for the components and to implement the plugins as a npm module.
My preferred path would be, to be able to reference the “chat” app as a web component in my “platform” app and to not use npm. Just like other web components here: webcomponents.org/element/progress-ring-component or webcomponents.org/element/@zooplus/zoo-web-components/6.0.3

I did try out the aurelia plugin web-components, but so far I was not able to implement the plugins into the “platform” project.

Does anyone know a way, to create web components from an aurelia app and use those components in another aurelia app (other than plugin + npm)?

Kind Regards,
Benzolitz

1 Like
#2

May I know what error you got when trying to implement the components to the platform app?

#3

I don’t really get any errors. It just does not work. No matter which combination of JavaScript files I add to my platform app, I can’t access the components of the chat app.

1 Like
#4

Can you help show what you meant with a gist? maybe pseudo code is fine too, working is more awesome though :stuck_out_tongue:

Please try it here https://gist.dumber.app

#5

Hey,

I uploaded two test apps to github:

Both are basically just a new project, nothing fancy added.

I installed “aurelia-web-components” in the chat app and initialized the registry in the main.ts (github.com/Benzolitz/chat/blob/master/src/main.ts), just like the plugins example.

I then referenced the component.js in my platform app (github.com/Benzolitz/platform/blob/master/index.ejs :13).
Now I would like to use the “my-chat-component” from the chat app, so I call that component in my platform app.html (github.com/Benzolitz/platform/blob/master/src/app.html :3).