Upgrade Nativescript 7.0 to 8.0 (including other dependencies)

[RoiJS]

Recently, the nativescript framework has been upgraded to version 8.0 https://blog.nativescript.org/nativescript-8-announcement/.

I think we have to make the necessary upgrade on the app as well but we will wait until the latest version will become stable (in couple of months maybe). I know nativescript community releases major version every 6 months, not really sure though, I need to research more about this.

I suggest to do more research how to upgrade the nativescript version to the latest one used by the app and also don't forget to check other dependencies' version.

[RoiJS]

This is the official blog post about upgrading the Angular version to 12. https://blog.nativescript.org/nativescript-angular-12/index.html

[RoiJS]

Update Angular Version refer to this page https://www.npmjs.com/package/@angular/cli#updating-angular-cli

[RoiJS]

Use this reference to check the node compatibility version with angular https://gist.github.com/LayZeeDK/c822cc812f75bb07b7c55d07ba2719b3

[RoiJS]

The current version of @nativescript/schematics which is responsible for code sharing feature is not yet updated to support angular version 12 and nativescript core 8. Its hard to manually update the version. I think we have to wait until the @nativescript/schematics plugin is updated.

[RoiJS]

Another solution to be able to proceed with the upgrade is to convert the reserbiz project to the regular nativescript project, the one without code sharing feature. Besides I don't think I will create a web version of the Resebiz. Only Android and iOS versions. For now, I will try this solution.

[RoiJS]

Unfortunately, the @nativescript/schematics has been deprecated https://www.npmjs.com/package/@nativescript/schematics. This means, the best solution that I have is to proceed with the solution from the previous comment.

[RoiJS]

Instead of trying to convert the current project to a non-shared version of Nativescript, I decided to create a new fresh nativescript application and start migrating files from the old project to this new project. To be honest, It will take some time to fully migrate the entire application. As much as possible, document all steps pertaining to the migration process.

[RoiJS]

Found an issue on @nativescript/firebase plugin. See thread EddyVerbruggen/nativescript-plugin-firebase#1873.

[RoiJS]

I discontinued using the plugin https://www.npmjs.com/package/nativescript-cfalert-dialog.

I replaced plugin https://www.npmjs.com/package/nativescript-appversion with https://www.npmjs.com/package/@nativescript/appversion

[RoiJS]

The application is now running!

There are still issues on other pages. These things need to be documented and fixed.

[RoiJS]

Looks like Tabs component is no longer supported on the version 8 of nativescript. This needs to be replaced by TabView component instead https://docs.nativescript.org/ui-and-styling.html#tabview

[RoiJS]

I have discovered some other issues that arises after the migration to the new version and these are the following:

• Since the https://www.npmjs.com/package/nativescript-cfalert-dialog. plugin has been discontinued, we have to find to refactor both alert and confirm function below so all codes using these functions will be fixed.

Reserbiz/Reserbiz/src/app/_services/dialog.service.ts

Lines 19 to 43 in e03c769

	alert(title: string, message: string, onClickEvent?: () => void) {
	// const alertOptions: DialogOptions = {
	// dialogStyle: CFAlertStyle.BOTTOM_SHEET,
	// title: title,
	// message: message,
	// backgroundBlur: true,
	// cancellable: true,
	// buttons: [
	// {
	// text: ButtonOptions.OKAY,
	// buttonStyle: CFAlertActionStyle.POSITIVE,
	// buttonAlignment: CFAlertActionAlignment.END,
	// textColor: '#FFFFFF',
	// backgroundColor: '#eb5a2e',
	// onClick: function () {
	// if (onClickEvent) {
	// onClickEvent();
	// }
	// },
	// },
	// ],
	// };
	// this._cfalertDialog.show(alertOptions);
	}

Reserbiz/Reserbiz/src/app/_services/dialog.service.ts

Lines 45 to 70 in e03c769

	confirm(title: string, message: string) {
	// const confirmOptions: DialogOptions = {
	// dialogStyle: CFAlertStyle.BOTTOM_SHEET,
	// title: title,
	// message: message,
	// buttons: [
	// {
	// text: ButtonOptions.YES,
	// buttonStyle: CFAlertActionStyle.POSITIVE,
	// backgroundColor: '#eb5a2e',
	// buttonAlignment: CFAlertActionAlignment.JUSTIFIED,
	// onClick: function () {},
	// },
	// {
	// text: ButtonOptions.NO,
	// buttonStyle: CFAlertActionStyle.NEGATIVE,
	// backgroundColor: '#D7D7D7',
	// buttonAlignment: CFAlertActionAlignment.JUSTIFIED,
	// onClick: function () {},
	// },
	// ],
	// };
	// return this._cfalertDialog.show(confirmOptions);
	return of(confirm(message) ? ButtonOptions.YES : ButtonOptions.NO);

• The nativescript-websockets has been deprecated and we should replace it with @master.technology/websockets.
  

• The payload property no longer exists in the newer version of @nativescript/local-notifications. This has to be investigated.

• There is a problem on nativescript-ui-dataform. Updating the form source object makes the UI resets. See attached video recordings below. I have asked the Nativescript community in Discord about the issue. Hoping that someone can help me resolve the issue.

bandicam.2022-06-08.18-58-06-848.mp4

• Another nativescript-ui-dataform related problem. There seems to be a problem with Switch , any form where this control exists makes the app crashes.

[RoiJS]

I'm done refactoring dialog.service.ts file. I have instead use https://docs.nativescript.org/interaction.html#dialogs for both alert and confirm dialogs.

[RoiJS]

The missing payload property on https://www.npmjs.com/package/@nativescript/local-notifications is now fixed. I have upgraded the version to @6.0.0.

[RoiJS]

I have started refactoring some places which uses nativescript-ui-dataform. I decided to replace it with angular reactive forms. So far, I'm almost done refactoring the add term details form.

[RoiJS]

At this moment, I have decided to not continue replacing the nativescript-dataform with angular reactive forms. Since the problem only exists with Switch control, I instead replaced all Switch control with Picker control with Yes and No options.

[RoiJS]

At this moment, I could say that the migration of the app from using the code sharing structure to the Nativescript standard project structure is now completed! Moving this issue to close now.