Skip to main content
ExLibris
  • Subscribe by RSS
  • Ex Libris Knowledge Center

    Preparing for the Upgrade to Angular 1.8 in Primo/Primo VE

    Released: May 16, 2022

    We plan to upgrade from Angular 1.6.10 to Angular 1.8 in the Primo/Primo VE November 2022 release. This upgrade may impact your Angular customizations in Primo and Primo VE and may require you to adjust the customizations accordingly prior to the upgrade to ensure a smooth migration to Angular 1.8.

    In advance of the November 2022 release, please carefully review the following information and ensure that your Angular customizations are ready for the update in November:

    What changes in Angular 1.8 could affect my Angular customizations?

    This section provides a technical description of the changes that may affect your Angular customizations after the November upgrade to Primo/Primo VE, which includes an upgrade from Angular 1.6 to Angular 1.8. If you are not familiar with the Angular code, you can skip this section since we provide a transformer tool that adjusts your Angular customization code automatically.

    In Angular version 1.8, the bindings attribute is no longer available within the scope of the controller function. For example, you can no longer access parentCtrl from the controller scope:

    (function () {

      "use strict";

      'use strict';

      var app = angular.module('viewCustom', ['angularLoad']); app.component('prmSearchBarAfter', {

        bindings: { parentCtrl: '<' },

        template: `<div>hello world</div>`,

        controller: ['$stateParams', function ($stateParams) {

          console.log(this.parentCtrl.vid);

        }]

      });

    })();

    Invalid Customization in Angular 1.8 - Example

    After the upgrade to Angular version 1.8, the above code is not compatible and will return following error:

    TypeError: cannot read properties of undefined ( reading 'vid')  …   from component.controller. 

    To prevent this error, you must modify the code and implement the ngOnInit() method (which is a life cycle hook) to ensure that the component is initialized and that the oninit function can access the component's input properties:

    (function () {

      "use strict";

      'use strict';

      var app = angular.module('viewCustom', ['angularLoad']); app.component('prmSearchBarAfter', {

        bindings: { parentCtrl: '<' },

        template: `<div>hello world</div>`,

        controller: ['$stateParams', function ($stateParams) {

          this.$onInit = function () {

            {

              console.log(this.parentCtrl.vid);

            }

          };

        }]

      });

    })();

    Valid Customization in Angular 1.8 - Example

    For more information, see https://docs.angularjs.org/guide/mig...vices-$compile.

    How do I check my Angular customizations to see if they need adjustment?

    Prior to the November upgrade to Primo/ Primo VE, it is necessary to test your customizations to determine whether the code needs to be adjusted prior to the upgrade. To test your customizations, add the testAngularCompatibility=true parameter to your discovery URL. For example:

    https://<discovery address>/discovery/search?vid=<vid>&lang=en&testAngularCompatibility=true

    After entering the updated URL, test each customization's functionality and check your browser's console log (Browser > DevTools > Console). If you get the following error message, you will need to adjust your code prior to the upgrade:

    TypeError: cannot read properties of undefined ...

    For information on how to change your customizations, continue to the next section.

    Starting with the May 2022 release, this parameter is available for use up to the November 2022 release update.

    How do I adjust the code for my Angular customizations?

    To simplify the process, we provide a tool that automatically transforms the code for your Angular customizations. For details on how to update customizations packages for Primo and Primo VE, see the following documents:

    To update your Angular customizations (including Primo Studio add-ons):
    1. Open the Transformer Tool by entering the following URL in your browser:

      https://astexplorer.net/#/gist/eb4a3406ba58524b1ef8613b2341c558/ceea9a042887d5a58460c0cca1f2283282f7acb8

      If you prefer to make these changes manually, refer to the following section and then skip to step 5 to test your changes to the custom.js file:

    2. Copy and paste the code from your custom.js file into the top left pane of the tool. The transformed code automatically appears in the bottom right pane of the tool.

      Primo_TransformerTool.png

      Transformer Tool
    3. Copy the code from the bottom right pane of the tool to your new custom.js file.

    4. Replace the old custom.js file in your customization package with the new custom.js file and then upload the updated customization package into your test environment.

    5. Test your customizations to ensure that they still work in your test environment.

    6. If all is working as expected, upload the updated customization package to your production environment any time prior to the November 2022 release update.

    Other Frequently Asked Questions

    1. Can we upload the adjusted code for Angular customizations prior to the November 2022 release?

      Yes, this is highly recommended. After you verify and confirm that your adjustments to the code are working properly in your test environment, upload the changes to your production environment. 

    2. How does the change to Angular 1.8 impact my Angular customizations?

      The change in version affects the way that Angular components are initialized and may require you to modify each customization's code to ensure that a component's properties are well defined and work after the November 2022 upgrade. For more information, see What changes in Angular 1.8 could affect my Angular customizations?.

    3. If we use Primo Studio add-ons, how do we adjust those customizations?

      Your custom.js file also includes customizations added using Primo-Studio's add-ons. You can use the Transformer Tool to adjust all customizations, including those from add-ons. For more details, see How do I adjust the code for my Angular customizations?.

    4. What is the timeline of the upgrade?

      We plan to upgrade to Angular 1.8 in the November 2022 release of both Primo and Primo VE. Starting with the May 2022 release, you can begin testing your Angular customizations and applying changes so that all changes are ready prior to the November 2022 release update.

    5. What happens if we are not ready for the November 2022 release?

      You must complete all adjustments to the Angular customizations prior to the November 2022 release update. Otherwise, affected customizations will not work after the update.

    • Was this article helpful?