Upgrade AngularJS from 1.3.15 to 1.7.9

Summary

As part of Configured Commerce 4.6, our reference themes and the Admin Console have been upgraded to the latest version of AngularJS. This was done both because that version is in long-term support and it removes some issues raised by penetration scans. In order to facilitate partners and customers not having to change and/or upgrade an existing site during this change, we used a bridge to lessen the impact of the upgrade. 

What is the issue?

We updated Angular 1.3 to 1.7 in the current themes using a bridge to minimize the impact to existing code while allowing the site to take advantage of the benefits of 1.7. After releasing this, we found that partners uncovered an issue around controller overrides and the init function. The way the original bridge tried to resolve this did not work in situations where there was an init function in both the base and override controllers.

What was the solution?

We converted all of the init functions to $onInit which is the Angular.js 1.7 version of the init function.

What do I have to do?

The steps you need to take vary.

For custom controllers extending Optimizely base controllers:

• Remove call in constructor to init if exists. The init function will be replaced by the $onInit function that is called by the AngularJS framework.
• If a custom controller has its own init method, replace it with $onInit.
• Replace call to super.init() with a call to super.$onInit(). The $onInit function is called by the AngularJS framework.

For custom controllers not extending Optimizely base controllers:

• Remove call in constructor to init if exists. The init function will be replaced by the $onInit function that is called by the AngularJS framework.
• If a custom controller has its own init method, replace it with $onInit.

For more information about the $olnit function, see the Understanding Components in Angular documentation linked below.

The order of the scripts in the theme.json file should list custom scripts after all system/platform resources. For example, this option would work in most cases:

{
    "BodyEndScripts": [
        "...System Provided Resources...",
        "Scripts/*",
        "Scripts/Custom/*", // <-- Note this is after the Scripts/*. This will correctly order the Custom folder scripts after all the other Scripts. 
    ]
}

Additional upgrade information

We were not able to test every possible nuance regarding this change, so we advise that you request the 4.6 update for your Cloud site or upgrade your SDK site to Configured Commerce 4.6 and either complete a thorough test or at least a quick review of the UI on the site.

To support the upgrade of AngularJS, AngularUI Router has also been upgraded from 0.3.1 to 1.0.22. Configured Commerce relies on *stateChange events emitted by the previous version of AngularUI Router. To make this upgrade easier as well, Configured Commerce is using a polyfill provided by AngularUI Router. This polyfill allows an application to continue to use the *stateChange events from the previous version of AngularUI Router while running the new version.

📘

Note

You may need to add "ui.router.state.events" to the angular.module declaration in insite.module.ts. This is mentioned in the code comments on https://github.com/angular-ui/ui-router/blob/70a237a/src/ng1/legacy/stateEvents.ts#L272 (which is the polyfill link above).

Related Links

• AngularJS Migration Documentation
• AngularUI Router Migration Documentation
• Understand Components in Angular