How to create a service/provider/controller in stenciljs and use it in angular

Stencil
1

Hi there

We are creating a framework like ionic with a stenciljs core project and for now angular bindings.

For the start i created a component that works like expected.

Then i created a service in my stenciljs project like so (just like menuController from ionic):

const createMenuController = () => {
    const menus: { [key: string]: any } = {};

    const get = (key: string): string => { return menus[key] ?? 'Not Set!'; };
    const set = (key: string, value: string): void => { menus[key] = value; };
    const deleteKey = (key: string): void => { delete menus[key];  };

    return {  get,  set,  deleteKey };
};
export const menuController = /*@__PURE__*/createMenuController();

and my angular service binding for this service (just a proxy):

import { menuController } from '@softec-gis/core';
@Injectable({ providedIn: 'root' })

export class MenuController {
    get(key: string) { return menuController.get(key); }
    set(key: string, value: any) { return menuController.set(key, value); }
    deleteKey(key: string) { return menuController.deleteKey(key); }
}

now my problem is i go 2 instances of this service.
one in my stenciljs component
and one in my angular ecosystem.

my tests in ionic and my test app:
Ionic:

window.ngcont = _ionic_core__WEBPACK_IMPORTED_MODULE_5__["menuController"]
window.stj = _index_fbe82773_js__WEBPACK_IMPORTED_MODULE_7__["m"]
ngcont === stj => true

my App:

window.ngcont = _gis_core__WEBPACK_IMPORTED_MODULE_4__["menuController"]
window.stj = _index_f4628f04_js__WEBPACK_IMPORTED_MODULE_1__["m"]
ngcont === stj => false

and it does not matter if i import the menuController directly from @gis/core or with my angular proxy service @gis/angular

window.ngcont = _gis_core__WEBPACK_IMPORTED_MODULE_4__["menuController"]
window.directImp = _gis_core__WEBPACK_IMPORTED_MODULE_1__["menuController"]
window.stj = _index_f4628f04_js__WEBPACK_IMPORTED_MODULE_1__["m"]
ngcont === stj => false
directImp === ngcont => true
directImp === stj => false

I cant find where ionic does something different then me.
Do i have to set some config stuff somewhere ?

1 Like
2

so no one not even @ionic can help me?
maybe @manucorporat can help me?

3

You can’t use Angular anything on Stencil. You import components made on Stencil to Angular, not the other way around.

It looks like you want to include components made on Stencil to Angular, so the idea here is to include the logic needed for the components to do any work (like depending on the data it will show a red background or a blue one) and add data to the components via props from the “outside”, and then when you import the Stencil components to Angular that’s when the data from “the outside” comes in the form of the Angular services.

1 Like