Updating Angular Application Without Breaking Custom Widgets & Other Widgets

I have a package.json file with dependencies and devDependencies for my project. Currently, the project uses version 1015.0.381 of certain modules and Angular version 12.2.14. I need to update everything to the latest versions directly. Can you look at the package.json file and tell me which modules need to be updated and how? Also, please let me know what changes I will need to make after updating, especially for our custom widgets, as there might be necessary modifications. Could you also provide an updated package.json with the latest versions?

See this My Packge.json File Code
“dependencies”: {
“angular/animations”: “12.2.14”,
“angular/cdk”: “12.2.13”,
“angular/common”: “12.2.14”,
“angular/compiler”: “12.2.14”,
“angular/core”: “12.2.14”,
“angular/forms”: “12.2.14”,
“angular/platform-browser”: “12.2.14”,
“angular/platform-browser-dynamic”: “12.2.14”,
“angular/router”: “12.2.14”,
“angular/upgrade”: “12.2.14”,
“c8y/client”: “1015.0.381”,
“c8y/ng1-modules”: “1015.0.381”,
“c8y/ngx-components”: “1015.0.381”,
“c8y/style”: “1015.0.381”,
“ngx-translate/core”: “13.0.0”,
@types/node”: “^20.1.4”,
“angular”: “1.6.9”,
“angular-google-charts”: “^2.2.3”,
“angular-resize-event”: “^3.2.0”,
“anychart”: “^8.11.0”,
“downloadjs”: “^1.4.7”,
“echarts”: “^5.4.2”,
“fontawesome”: “^5.6.3”,
“jspdf”: “^2.5.1”,
“leaflet-extra-markers”: “^1.2.2”,
“leaflet.markercluster”: “^1.5.3”,
“leaflet2”: “npm:leaflet@^1.9.3”,
“moment”: “^2.29.4”,
“ng2-datepicker”: “^12.0.0”,
“pdf-lib”: “^1.17.1”,
“rxjs”: “~6.6.3”,
“svg2pdf.js”: “^2.2.1”,
“zone.js”: “~0.11.4”
},
“devDependencies”: {
“angular-devkit/build-angular”: “12.2.14”,
“angular/compiler-cli”: “12.2.14”,
“angular/language-service”: “12.2.14”,
“angular/localize”: “12.2.14”,
“angular/service-worker”: “12.2.14”,
“c8y/cli”: “1015.0.381”,
“types/jest”: “^27.0.3”,
“jest”: “^27.4.5”,
“jest-preset-angular”: “^11.0.1”,
“ng-packagr”: “^12.2.7”,
“typescript”: “4.2.4”
},
Can you provide a complete guide on how to update my Angular application to the latest version without removing or breaking my custom widgets? After updating, some of my widgets like Map, Image, Welcome, Cockpit, QuickLinks, and others are being removed. I need to know the steps involved in updating the dependencies and devDependencies, and any necessary changes that need to be made to ensure my custom widgets remain functional.

Hi @SharjeelPc,

We can not provide you a complete guide on how to update “your application” as it contains specific customizations, that you would need to take care of on your own.
A general guide on how to perform the upgrade can be found in the upgrade documentation.

In case you have specific issues, let us know and describe the steps that you have done to perform the upgrade.
A general guideline is to just scaffold the same application (new version) into a different folder and use a diff tool to compare the changes that were done on the files between your version and the new one.

Regarding the missing widgets you are probably missing the changes that were made to the ng1.ts and the app.module.ts files between your old and new version.

Regards,
Tristan

i Have Update my App Verion From Documentation I have Facing This Issues
“dependencies”: {
“angular/animations”: “16.2.12”,
“angular/cdk”: “12.2.13”,
“angular/common”: “16.2.12”,
“angular/compiler”: “16.2.12”,
“angular/core”: “16.2.12”,
“angular/forms”: “16.2.12”,
“angular/platform-browser”: “16.2.12”,
“angular/platform-browser-dynamic”: “16.2.12”,
“angular/router”: “16.2.12”,
“angular/upgrade”: “16.2.12”,
“c8y/client”: “1019.24.1”,
“c8y/ng1-modules”: “1019.24.1”,
“c8y/ngx-components”: “1019.24.1”,
“c8y/style”: “1019.24.1”,
“c8y/websdk”: “1019.24.1”,
“c8y/widget-plugin”: “1019.24.1”,
“ngx-translate/core”: “13.0.0”,
“types/node”: “^20.1.4”,
“angular”: “1.6.9”,
“angular-google-charts”: “^2.2.3”,
“angular-resize-event”: “^3.2.0”,
“anychart”: “^8.11.0”,
“downloadjs”: “^1.4.7”,
“echarts”: “^5.4.2”,
“file-loader”: “^6.2.0”,
“fontawesome”: “^5.6.3”,
“html-loader”: “4.1.0”,
“jspdf”: “^2.5.1”,
“leaflet-extra-markers”: “^1.2.2”,
“leaflet.markercluster”: “^1.5.3”,
“leaflet2”: “npm:leaflet@^1.9.3”,
“moment”: “^2.29.4”,
“ng2-datepicker”: “^12.0.0”,
“pdf-lib”: “^1.17.1”,
“rxjs”: “~6.6.3”,
“style-loader”: “3.3.1”,
“svg2pdf.js”: “^2.2.1”,
“zone.js”: “~0.11.4”
},
“devDependencies”: {
“angular-devkit/build-angular”: “16.2.14”,
“angular/compiler-cli”: “16.2.12”,
“angular/language-service”: “16.2.12”,
“angular/localize”: “16.2.12”,
“angular/service-worker”: “16.2.12”,
“c8y/cli”: “1018.510.4”,
“types/jest”: “^27.0.3”,
“jest”: “^27.4.5”,
“jest-preset-angular”: “^11.0.1”,
“ng-packagr”: “^12.2.7”,

"typescript": "4.9.5"

},

See this Image And guide me How to Update My Application Version to Latest Version

i update my App to the recent Version of cockpit but now I have problem .my Node Modules Widgets like Map ,Image,kpi ,cockpit welcome Widgets and alarms widgets in no available in Current Cockpit Version I have this package.json File
“dependencies”: {
“angular/animations”: “17.3.11”,
“angular/cdk”: “17.3.10”,
“angular/cli”: “17.3.8”,
“angular/common”: “17.3.11”,
“angular/compiler”: “17.3.11”,
“angular/core”: “17.3.11”,
“angular/forms”: “17.3.11”,
“angular/platform-browser”: “^17.3.11”,
“angular/platform-browser-dynamic”: “17.3.11”,
“angular/router”: “17.3.11”,
“angular/upgrade”: “17.3.11”,
“c8y/client”: “1020.2.12”,
“c8y/ng1-modules”: “1020.2.12”,
“c8y/ngx-components”: “1020.2.12”,
“c8y/options”: “1020.2.12”,
“c8y/style”: “1020.2.12”,
“c8y/websdk”: “1020.2.12”,
“c8y/widget-plugin”: “1020.2.12”,
“ngtools/webpack”: “17.3.8”,
“ngx-translate/core”: “15.0.0”,
“ngx-translate/http-loader”: “8.0.0”,
“types/node”: “^20.1.4”,
“angular”: “1.6.9”,
“angular-google-charts”: “^2.2.3”,
“angular-resize-event”: “^3.2.0”,
“anychart”: “^8.11.0”,
“downloadjs”: “^1.4.7”,
“echarts”: “^5.4.2”,
“fontawesome”: “^5.6.3”,
“html-loader”: “4.1.0”,
“jspdf”: “^2.5.1”,
“leaflet-extra-markers”: “^1.2.2”,
“leaflet.markercluster”: “^1.5.3”,
“leaflet2”: “npm:leaflet@^1.9.3”,
“moment”: “^2.29.4”,
“ng2-datepicker”: “12.0.0”,
“pdf-lib”: “^1.17.1”,
“rxjs”: “~6.6.3”,
“style-loader”: “3.3.1”,
“svg2pdf.js”: “^2.2.1”,
“zone.js”: “~0.11.4”
},
“devDependencies”: {
“angular-devkit/build-angular”: “17.3.8”,
“angular/compiler-cli”: “17.3.11”,
“angular/language-service”: “17.3.11”,
“angular/localize”: “17.3.11”,
“angular/service-worker”: “17.3.11”,
“c8y/cli”: “1018.0.240”,
“types/jest”: “^27.0.3”,
“jest”: “^27.4.5”,
“jest-preset-angular”: “^11.0.1”,
“ng-packagr”: “^12.2.7”,
“ngx-bootstrap”: “12.0.0”,
“typescript”: “4.9.5”
}


commented out those lines because the project wasn’t running when those were included.


also I have this type of errors and in my Export Pdf Chart my Input Module is not Showing
import { DatepickerModule } from “ng2-datepicker”;

i use this kindly proper guide me what can i do to update my Application to latest Version without losing any widgets

As already said:

You are probably missing the “cockpitWidgets()” in the imports of your AppModule.
Try to e.g. compare the old app.module.ts with the new one. Same applies also for the old ng1.ts and the new one.

Regarding the ng2-datepicker we can not really help you as this is not provided by us. It seems to be unmaintained (last updated 3 years ago) and might therefore be incompatible with newer angular versions.

@Tristan_Bastian Thanks


In this Picture I have Map is not Showing Properly all Over Widgets is Working Good Customize And Other NodeModules Widget but I have That Problem
import { CoreModule, HOOK_COMPONENTS, RouterModule } from “@c8y/ngx-components”;
its Show This
‘HOOK_COMPONENTS’ is deprecated.ts(6385)
dynamic-component.model.d.ts(33, 4): The declaration was marked as deprecated here.
(alias) const HOOK_COMPONENTS: InjectionToken<DynamicComponentExtension>
import HOOK_COMPONENTS
A hook to add dynamic components to the UI (e.g. widgets).
providers: [ SharedService, { provide: HOOK_COMPONENTS, multi: true, useValue: [...CUSTOMWIDGET], }, ],
When replace HOOK_COMPONENTS with Empty String " " Map Showing Proper But Custom Widgets Not Show
Kindly CHeck and Guide me

i upload Both Images my version se 1018.158.0 and angular Version 15.2.7

Can you share the contents of CUSTOMWIDGET?
My guess is that you’ve customized the Map widget and that this is now broken.


I have 6 Custom widget which is Use in My App all other 5 Same Like This


I have This 6 Component See this

Can’t really help you that way.
I would suggest you remove the widgets one by one from this array to narrow down which one of these might be the problematic one.

Yes I have Found That Widget
{
id: ‘export.pdf’,
label: ‘Export Pdf Chart’,
description: ‘’,
component: ExportPdfComponent,
configComponent: ExportPdfConfig,
previewImage: require(‘@widget-assets/export-pdf.png’),
data: {
ng1: {
options: {
noDeviceTarget: false,
noNewWidgets: false,
deviceTargetNotRequired: false,
groupsSelectable: true,
},
},
},
},
This Widget is problematic Widget