Hi,
We just upgraded our custom application from c8y 1018.0.269 to 1021.22.145. In 1018 version all widgets from widget collection (widgets available in Cockpit application) was available in our custom application. After the upgrade, there is no default widgets.
How can I import all widgets implemented by Cumulocity to my custom application?
Thanks in advance for your help! 
Can you share your cumulocity.config.ts, app.module.ts and ng1.ts files (if existing)?
I’m guessing that you are e.g. missing the cockpitWidgetsExports in your cumulocity.config.ts: cockpit/cumulocity.config.ts at v1021.22.145 · Cumulocity-IoT/cockpit · GitHub
Some older widgets might be still based on angularJS and would required some of these imports: cockpit/src/ng1.ts at v1021.22.145 · Cumulocity-IoT/cockpit · GitHub
Regards,
Tristan
Thank you for your answer.
I was missing cockpitWidgetsExports in cumulocity.config.ts.So I’ve added it.
I have widgets in my custom app:
In ng1.ts file I was also missing imports. I’ve added:
import "@c8y/ng1-modules/assetPropertyWidget/cumulocity.json";
import "@c8y/ng1-modules/eventList/cumulocity.json";
import "@c8y/ng1-modules/htmlWidget/cumulocity.json";
import "@c8y/ng1-modules/scada/cumulocity.json";
import "@c8y/ng1-modules/trafficLightWidget/cumulocity.json";
But this did not add any new widgets to my custom application.
I am still missing:
app.module.ts
import { DragDropModule } from "@angular/cdk/drag-drop";
import { CdkTreeModule } from "@angular/cdk/tree";
import { DecimalPipe } from "@angular/common";
import { NgModule } from "@angular/core";
import { MatListModule } from "@angular/material/list";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { RouterModule } from "@angular/router";
import { UpgradeModule as NgUpgradeModule } from "@angular/upgrade/static";
import {
CoreModule,
DashboardModule,
EventRealtimeService,
hookAction,
ManagedObjectRealtimeService,
} from "@c8y/ngx-components";
import { ContextDashboardModule } from "@c8y/ngx-components/context-dashboard";
import {
HybridAppModule,
UPGRADE_ROUTES,
UpgradeModule,
} from "@c8y/ngx-components/upgrade";
import { WidgetsModule } from "@c8y/ngx-components/widgets";
@NgModule({
imports: [
UpgradeModule,
BrowserAnimationsModule,
RouterModule.forRoot([{ myRoutes }, ...UPGRADE_ROUTES], {
useHash: true,
}),
CoreModule.forRoot(),
NgUpgradeModule,
DashboardModule,
CdkTreeModule,
DragDropModule,
ContextDashboardModule,
MatListModule,
WidgetsModule,
],
declarations: [
myDeclarations
],
providers: [
hookAction(myAppActionFactory),
EventRealtimeService,
ManagedObjectRealtimeService,
DecimalPipe,
],
})
export class AppModule extends HybridAppModule {
constructor(protected override upgrade: NgUpgradeModule) {
super();
}
}
cumulocity.config.ts
import type { ConfigurationOptions } from "@c8y/devkit";
import { cockpitWidgetsExports } from "@c8y/ngx-components/widgets/cockpit-exports";
import { author, description, version } from "./package.json";
export default {
runTime: {
author,
description,
version,
name: "My app",
tabsHorizontal: true,
upgrade: true,
rightDrawer: true,
contentSecurityPolicy:
"base-uri 'none'; default-src 'self' 'unsafe-inline' http: https: ws: wss:; connect-src 'self' http: https: ws: wss:; script-src 'self' *.twitter.com *.twimg.com *.aptrinsic.com 'unsafe-inline' 'unsafe-eval' data:; style-src * 'unsafe-inline' blob:; img-src * data:; font-src * data:; frame-src *; worker-src 'self' blob:;",
dynamicOptionsUrl: true,
icon: {
url: "url(/apps/my-app/assets/logo.png)",
},
exports: [...cockpitWidgetsExports],
},
buildTime: {
federation: [
"@angular/animations",
"@angular/cdk",
"@angular/common",
"@angular/compiler",
"@angular/core",
"@angular/forms",
"@angular/platform-browser",
"@angular/platform-browser-dynamic",
"@angular/router",
"@angular/upgrade",
"@c8y/client",
"@c8y/ngx-components",
"angular",
"ngx-bootstrap",
"@ngx-translate/core",
"@ngx-formly/core",
],
},
} as const satisfies ConfigurationOptions;
ng1.ts
import “@c8y/ng1-modules/core”;
import “@c8y/ng1-modules/assetPropertyWidget/cumulocity.json”;
import “@c8y/ng1-modules/eventList/cumulocity.json”;
import “@c8y/ng1-modules/htmlWidget/cumulocity.json”;
import “@c8y/ng1-modules/scada/cumulocity.json”;
import “@c8y/ng1-modules/trafficLightWidget/cumulocity.json”;
Are you actually importing the ng1.ts file anywhere?
E.g. compare it to: cockpit/src/bootstrap.ts at v1021.22.145 · Cumulocity-IoT/cockpit · GitHub
Yes. That is my bootstrap.ts file:
import "./ng1";
import "./polyfills";
import { enableProdMode } from "@angular/core";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app/app.module";
declare const __MODE__: string;
if (__MODE__ === "production") {
enableProdMode();
}
export function bootstrap() {
return platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch((err) => console.log(err));
}
Exactly the same as in the example you linked.
Are you able to share the full sources of your application?
Unfortunately, I cannot share my repository.
I’ve checked all the imports in app.module.ts and ng1.ts files from the example you linked. I found a working solution.
The imports I was missing were in app.module.ts, ng1.ts and cumulocity.config.ts.
app.module.ts
import { DashboardUpgradeModule } from "@c8y/ngx-components/upgrade";
@NgModule({
imports: [ … DashboardUpgradeModule]
…})
ng1.ts
import "@c8y/ng1-modules/assetPropertyWidget/cumulocity.json";
import "@c8y/ng1-modules/cockpit-reports/cumulocity.json";
import "@c8y/ng1-modules/eventList/cumulocity.json";
import "@c8y/ng1-modules/htmlWidget/cumulocity.json";
import "@c8y/ng1-modules/kpi/cumulocity.json";
import "@c8y/ng1-modules/scada/cumulocity.json";
import "@c8y/ng1-modules/trafficLightWidget/cumulocity.json";
cumulocity.config.ts
import { cockpitWidgetsExports } from "@c8y/ngx-components/widgets/cockpit-exports";
export default {
runTime: {
...
exports: [...cockpitWidgetsExports],
},
...
}