# Add default widget collection to custom application

**URL:** <https://community.cumulocity.com/t/add-default-widget-collection-to-custom-application/14471>\
**Category:** Forum\
**Tags:** widget, custom-application, cumulocity-edge\
**Created:** [April 10, 2026, 1:35pm UTC](https://community.cumulocity.com/t/add-default-widget-collection-to-custom-application/14471 "2026-04-10T13:35:53Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![patrycja.dembinska](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/patrycja.dembinska/32/32538_2.png) [@patrycja.dembinska](https://community.cumulocity.com/u/patrycja.dembinska)\
**Post date:** [April 10, 2026, 1:35pm UTC](https://community.cumulocity.com/t/add-default-widget-collection-to-custom-application/14471/1 "2026-04-10T13:35:53Z")

</div>

Hi,

We just upgraded our custom application from c8y 1018.0.269 to 1021.22.145. In 1018 version all widgets from [widget collection](https://cumulocity.com/docs/cockpit/widgets-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! 😃

---

<div class="post-metadata">

**Author:** ![Tristan\_Bastian](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/tristan_bastian/32/18259_2.png) [@Tristan\_Bastian](https://community.cumulocity.com/u/Tristan_Bastian)\
**Post date:** [April 10, 2026, 8:59pm UTC](https://community.cumulocity.com/t/add-default-widget-collection-to-custom-application/14471/2 "2026-04-10T20:59:07Z")

</div>

Hi @patrycja.dembinska,

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](https://github.com/Cumulocity-IoT/cockpit/blob/v1021.22.145/cumulocity.config.ts#L28)

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](https://github.com/Cumulocity-IoT/cockpit/blob/v1021.22.145/src/ng1.ts)

Regards,  
Tristan

---

<div class="post-metadata">

**Author:** ![patrycja.dembinska](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/patrycja.dembinska/32/32538_2.png) [@patrycja.dembinska](https://community.cumulocity.com/u/patrycja.dembinska)\
**Post date:** [April 13, 2026, 12:24pm UTC](https://community.cumulocity.com/t/add-default-widget-collection-to-custom-application/14471/3 "2026-04-13T12:24:54Z")

</div>

Hi @Tristan_Bastian 🙂

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:

1. Alarm list
2. All critical alarms
3. Applications
4. Data Points Table
5. Help and service
6. Image
7. Info gauge
8. KPI widget
9. Legacy welcome to Cockpit
10. Linear Gauge
11. Map
12. Markdown
13. Message sending
14. Recent alarms
15. Rotation
16. Silo
17. Welcome to Cockpit

In `ng1.ts` file I was also missing imports. I’ve added:

```typescript
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:

1. Asset properties
2. Data point graph
3. Data point list
4. Event list
5. HTML
6. Pie Chart
7. Radial Gauge
8. SCADA
9. Traffic light.

`app.module.ts`

```typescript
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`

```typescript
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`

```typescript
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”;

```

---

<div class="post-metadata">

**Author:** ![Tristan\_Bastian](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/tristan_bastian/32/18259_2.png) [@Tristan\_Bastian](https://community.cumulocity.com/u/Tristan_Bastian)\
**Post date:** [April 13, 2026, 12:47pm UTC](https://community.cumulocity.com/t/add-default-widget-collection-to-custom-application/14471/4 "2026-04-13T12:47:18Z")

</div>

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](https://github.com/Cumulocity-IoT/cockpit/blob/v1021.22.145/src/bootstrap.ts#L2)

---

<div class="post-metadata">

**Author:** ![patrycja.dembinska](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/patrycja.dembinska/32/32538_2.png) [@patrycja.dembinska](https://community.cumulocity.com/u/patrycja.dembinska)\
**Post date:** [April 14, 2026, 7:22am UTC](https://community.cumulocity.com/t/add-default-widget-collection-to-custom-application/14471/5 "2026-04-14T07:22:16Z")

</div>

Yes. That is my `bootstrap.ts` file:

```typescript
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.

---

<div class="post-metadata">

**Author:** ![Tristan\_Bastian](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/tristan_bastian/32/18259_2.png) [@Tristan\_Bastian](https://community.cumulocity.com/u/Tristan_Bastian)\
**Post date:** [April 14, 2026, 7:59am UTC](https://community.cumulocity.com/t/add-default-widget-collection-to-custom-application/14471/6 "2026-04-14T07:59:24Z")

</div>

Are you able to share the full sources of your application?

---

<div class="post-metadata">

**Author:** ![patrycja.dembinska](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/patrycja.dembinska/32/32538_2.png) [@patrycja.dembinska](https://community.cumulocity.com/u/patrycja.dembinska)\
**Post date:** [April 14, 2026, 3:37pm UTC](https://community.cumulocity.com/t/add-default-widget-collection-to-custom-application/14471/7 "2026-04-14T15:37:10Z")

</div>

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`

```typescript
import { DashboardUpgradeModule } from "@c8y/ngx-components/upgrade";

@NgModule({
  imports: [… DashboardUpgradeModule] 
…})

```

`ng1.ts`

```typescript
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`

```typescript
import { cockpitWidgetsExports } from "@c8y/ngx-components/widgets/cockpit-exports";

export default {
  runTime: {
    ...
    exports: [...cockpitWidgetsExports],
  },
  ...
}

```