Integration of shell module to custom device management application

,
1

Product/components used and version/fix level:

Cumulocity Web UI 1015.0.452

Detailed explanation of the problem:

I want to integrate the Shell module to our custome device management application.
It basically works well by adding the modules DeviceShellModule and DeviceShellSharedModule to the imports list of NgModule in app.module.ts.

@NgModule({
  imports: [
    // Upgrade module must be the first
    UpgradeModule,
    // other modules
    CommandTemplatesModule,
    DeviceShellModule,
    DeviceShellSharedModule
  ],
  declarations: [
    // our custom widgets
  ],
  entryComponents: [
    // our custom widgets
  ],
  providers: [
   //...
  ]
})
export class AppModule extends HybridAppModule {
  constructor(protected upgrade: NgUpgradeModule) {
    super();
  }
}

I tried now to add the CommandTemplatesModule as well but it seems to require additional configuration since the console shows an error when you click the button predefined commands to open the dialog for the commands.

Error messages / full error message screenshot / log file:

core.js:6946 ERROR Error: [$injector:unpr] Unknown provider: c8yCommandTemplatesDirectiveProvider <- c8yCommandTemplatesDirective
http://errors.angularjs.org/1.6.9/$injector/unpr?p0=c8yCommandTemplatesDirectiveProvider%20%3C-%20c8yCommandTemplatesDirective
    at eval (angular.js:116:12)
    at eval (angular.js:4887:19)
    at Object.getService [as get] (angular.js:5047:32)
    at eval (angular.js:4892:45)
    at Object.getService [as get] (angular.js:5047:32)
    at UpgradeHelper.getDirective (upgrade-static.umd.js:1498:40)
    at new UpgradeHelper (upgrade-static.umd.js:1495:57)
    at new UpgradeComponent (upgrade-static.umd.js:1802:27)
    at new CommandTemplates (c8y-ngx-components-device-shell.js:199:9)
    at NodeInjectorFactory.CommandTemplates_Factory [as factory] (c8y-ngx-components-d…ice-shell.js:202:71)

I guess the provider for the command templates must be registered in some way I don’t understand yet. Is there some example code how it has to be used?
Thanks for your support!

2

Hi @Christoph_WeiA,

first of all: v1015 is out of support and I would highly recommend to upgrade to a newer version.

Can you describe what exactly you have customized? Especially any removals of imports in the app.module.ts or ng1.ts files would be of interest.
The original app.module.ts for the devicemanagement app in that version only includes the DeviceShellModule so why do you start adding CommandTemplatesModule and DeviceShellSharedModule as well?

I could imagine that you have removed the import '@c8y/ng1-modules/commandTemplates/cumulocity.json'; entry in the ng1.ts file and that this is now causing issues.

Regards,
Tristan

3

Hi Tristan,

thanks for your hint - that solved the issue.
I did not remove any import. Our “customizied” device management app was initially built by Software AG about 5 years ago. The Shell module was not existing at this point yet. Now I simply like to add it but found no documentation which imports are required for this purpose.

Thanks for your support!