Salesforce

How Do I Upgrade Magic xpa Web Client Applications from Angular 7 to Angular 8? (Magic xpa 4.x)

« Go Back

Information

 
Approval Process StatusPublished
Objective
Description

How Do I Upgrade Magic xpa Web Client Applications from Angular 7 to Angular 8? (Magic xpa 4.x)

To upgrade Web Client applications generated in Magic xpa 4.5 or prior to Angular 8 framework, you need to follow the given steps:

1. Upgrade the following:

  • Node.js: Download and install version 10.9 or greater from the site https://nodejs.org/en/download/.
    You can check the installed version using command node -v.

  • Angular 8: Execute command npm i @angular/cli@8.
    You can check your version with command ng -v.

2. Create a dummy project as follows:

  • Install Magic xpa 4.5a or above.

  • Create a new Magic xpa project with one simple Web Client program.

  • Generate the Web application (Magic will generate the new project using Angular 8).

  • Compare two files: package.json from the dummy project and package.json in your existing project.

  • Merge the changes into your package.json.

  • Make sure you have updated the version number of all the packages.

  • Verify the changes in the following packages:

o typescript: The version must be >= 3.4.0 < 3.5.0.

o @Angular/xxx: The version must be 8.x.x.

o @Magic-xpa: The version must be 4.5.1 or greater.

3. In your existing Web application follow the steps below:

  • Delete package_lock.json file.

  • Delete node_modules folder.

  • Execute command npm i.

4. If your application contains the components created by Load on Demand, then you need to change the loadChildren declarations in app.routes.ts because the previous string format is deprecated in Angular 8. Since version: 4.6

For example, if the original code is:

export const routes: Routes = [

{

path: 'FWLCallProgram1',

loadChildren: './admin/admin.module#AdminModule',

},

then update the code to:

export const routes: Routes = [

{

path: 'FWLCallProgram1',

loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),

},

Related Topics

Angular instructions for the upgrade: https://update.angular.io/#7.0:8.0

Angular instructions for the upgrade from 8.0 to 10.0: https://update.angular.io/#8.0:10.0

Since version: 4.5a

Reference
TitleHow Do I Upgrade Magic xpa Web Client Applications from Angular 7 to Angular 8? (Magic xpa 4.x)
URL NameHow-Do-I-Upgrade-Magic-xpa-Web-Client-Applications-from-Angular-7-to-Angular-8--xpa-4x