Product/components used and version/fix level:
I would like to create a service and publish it in a npm library. The Idea is to wrap current exisiting Services and create wrappers for functions and so on. My problem is that i don’t know how to get the library to use the same services as the users c8y client, for auth and so on. Additionally the library currently doesn’t get the services injected. I’m not sure how to solve this issue.
Detailed explanation of the problem:
My current Setup looks like the following:
MyLibModule:
import { NgModule } from '@angular/core';
import { CoreModule } from '@c8y/ngx-components'; // import the c8yclient module
import { MyLibService} from './mylib.service';
@NgModule({
imports: [CoreModule.forRoot()],
providers: [MyLibService],
})
export class MyLibModule{}
My Test Application using the Lib Service:
// Assets need to be imported into the module, or they are not available
import { assetPaths } from '../assets/assets';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { WidgetPluginComponent } from './widget-plugin.component';
import { WidgetPluginConfig } from './widget-plugin-config.component';
import { FormsModule, hookComponent, gettext } from '@c8y/ngx-components';
import { MyLibModule} from 'myc8yWrapperLib';
import { CoreModule } from '@c8y/ngx-components';
@NgModule({
declarations: [WidgetPluginComponent, WidgetPluginConfig],
entryComponents: [WidgetPluginComponent, WidgetPluginConfig],
imports: [CommonModule, FormsModule, CoreModule, MyLibModule],
exports: [],
providers: [
hookComponent({
id: 'angular.widget.plugin',
label: gettext('Test Widget for Lib'),
description: gettext('Widget added from test Widget for Lib module.'),
component: WidgetPluginComponent,
previewImage: assetPaths.previewImage,
configComponent: WidgetPluginConfig,
}),
],
})
export class TestWidgetForLibModule {}
Component using the service:
import { Component, Input } from '@angular/core';
import { MyLibService} from 'myc8yWrapperLib';
@Component({
selector: 'c8y-widget-plugin',
template: `
<div class="p-16">
<h1>Widget-plugin</h1>
<p class="text">{{ config?.text || 'No text' }}</p>
<small>My context is: {{ config?.device?.name || 'No context' }}</small>
</div>
`,
styleUrls: ['./widget-plugin.component.css'],
})
export class WidgetPluginComponent {
@Input() config;
constructor(private myService: MyLibService) {
console.log(myService);
}
}
Error messages / full error message screenshot / log file:
The Widget compiles and i can access it in the cockpit but the services that my own service relies on don’t get injected.
NullInjectorError: R3InjectorError(TestWidgetForLibModule)[MyLibService-> n -> n -> n -> n]:
NullInjectorError: No provider for n!
Can this be done somehow? I could possibly leave out the Module and provide the services in the component my service is used but this is tedious and redundant.
Question related to a free trial, or to a production (customer) instance?
Production