Product/components used and version/fix level:
Cumulocity device management application, web-sdk 1005.7.19
Detailed explanation of the problem:
We are using a customized (hybrid) device management application with components written in AngularJS and Angular. The application has a dashboard which uses some widgets written in Angular. The dashboard itself is a plugin which is created within the AngularJS part:
package.json
{
"name": "Cockpit Home",
"ngModules": [
"dmg.c8y.deviceOperationsDashboard"
],
"category": "",
"icon": "dashboard",
"color": "#F03F0F",
"description": "This plugin is a device operations dashboard.",
"js": [
"deviceOperationsDashboard.module.js"
],
"folderName": "home",
"appsInclude": [
"cockpit"
]
}
deviceOperationsDashboard.module.js
(function () {
'use strict';
const MODULE_NAME = 'dmg.c8y.deviceOperationsDashboard';
angular.module(MODULE_NAME, [])
.config(configBlock);
/* @ngInject */
function configBlock(
$routeProvider,
c8yNavigatorProvider,
c8yTitleProvider,
c8yConfig,
gettext
) {
const DASHBOARD_TEMPLATE = '<!-- Workaround to make Widget tranparent START--><style>.panel-content-transparent {background-color: rgba(0,0,0,0);box-shadow:none;}</style><!-- Workaround to make Widget tranparent END--><c8y-dashboard-gridstack set-page-title="true" name="{{vm.dashboardName}}" default-children="vm.children" set-global="vm.isGlobal"></c8y-dashboard-gridstack>';
const DASHBOARD_NAME = 'deviceOperationsDashboard';
const DASHBOARD_IS_GLOBAL = true;
const DASHBOARD_CHILDREN = [
{
"col": 6,
"configTemplateUrl": "widget-template-config-devicesOnlineHistory.widget.html",
"name": "devicesOnlineHistory.widget",
"_x": 4,
"_y": 1,
"position": 4,
"title": "Online History",
"config": {
"showNumberOfDaysAgo": 60,
"selectedView": {
"displayName": "Bar chart of device online history",
"name": "barchart"
}
},
"_width": 4,
"_height": 4,
"templateUrl": "widget-template-devicesOnlineHistory.widget.html"
},
//...
];
/* @ngInject */
function DeviceOperationsDashboardController() {
this.dashboardName = externalConfig().dashboardName || DASHBOARD_NAME;
this.children = externalConfig().dashboardChildren || DASHBOARD_CHILDREN;
this.isGlobal = DASHBOARD_IS_GLOBAL;
}
function externalConfig() {
return c8yConfig[MODULE_NAME] || {};
}
c8yNavigatorProvider.addNavigation({
priority: 10000,
name: gettext('Operations Dashboard'),
icon: 'cogs',
path: '/deviceOperationsDashboard'
});
c8yTitleProvider.addTitle('deviceOperationsDashboard', {
data: { title: 'Device Operations Dashboard' }
});
$routeProvider.when('/deviceOperationsDashboard', {
template: DASHBOARD_TEMPLATE,
controller: DeviceOperationsDashboardController,
controllerAs: 'vm',
resolve: {
wait: () =>
externalConfig().wait
}
});
}
}());
The (angular) widgets used by the dashboard are imported in the app.module.ts and registered as provider:
providers: [
{
provide: HOOK_COMPONENTS, // 2.
multi: true,
useValue: {
id: 'devicesOnlineHistory.widget', // 3.
label: 'Devices Online History Widget',
description: 'Shows a bar chart of online devices for the last days.',
component: DevicesOnlineHistoryWidgetComponent, // 4.
configComponent: DevicesOnlineHistoryWidgetConfigComponent,
data: {
ng1: {
options: {
noDeviceTarget: true,
}
}
}
}
},
We now try to update the web-sdk version to 1011.0.38. After the update the dashboard is not working anymore since it complains about missing template files.
When I check the debugger of the browser I can see that those files are not requested at all as long as we use the old web-sdk.
Error messages
Does anybody know where these template errors come from and how to solve it? I guess it is somehow related to the update of the angular version which was increased to 11.2.2 as part of the websdk update.