Updating Angular Application Without Breaking Custom Widgets & Other Widgets

, , ,
1

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.

2

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

3

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”,

2
21084×178 9.55 KB

"typescript": "4.9.5"

},

4

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

bug
bug1920×940 49 KB

5

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”
}

image
image597×866 24.1 KB

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

6

image
image1919×941 78.6 KB

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
7

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.

8

@Tristan_Bastian Thanks

9

image
image1920×1080 220 KB

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

10

image
image1920×1080 309 KB

11

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

12

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

13

image
image698×774 37.5 KB

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

14

image
image1302×933 63 KB

I have This 6 Component See this

15

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.

16

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

17

image
image1920×1080 244 KB

I updated my application’s version from 10:18 to 10:20, but now the input in my PDF export isn’t working, and the calendar isn’t showing up. Additionally, I was using ng2 datePicker, which was working fine in version 10:18, but it’s not working anymore.
kindly guide me properly this export pdf widget is my Custom widget and tell other widgets details

18

Hi @SharjeelPc,

as already said:

Please consider using the built-in date picker: codex

As this is your own implementation you would have to deal with upgrading it on your own.

Regards,
Tristan