Uploaded image for project: 'CiviVolunteer'
  1. CiviVolunteer
  2. VOL-310

Blank screen on CiviVolunteer pages after upgrade to Civi 4.7.21


    • Type: Bug
    • Status: Done/Fixed
    • Priority: Important
    • Resolution: Fixed/Completed
    • Affects Version/s: 4.6-2.2.1
    • Fix Version/s: 4.7.21-2.2.2
    • Labels:
    • Versioning Impact:
      Patch (backwards-compatible bug fixes)
    • Documentation Required?:
    • Verified?:


      After upgrading CiviCRM to 4.7.21 from 4.7.20, several Volunteer pages display a blank screen with only the "Volunteer" page title.

      The following pages are affected:

      • Volunteers | New Volunteer Project
      • Volunteers | Manage Volunteer Projects
      • Volunteers | Search For Volunteer Opportunities

      On each of these pages there are the following javascript errors:

      TypeError: CRM.angular.requires is undefined[Learn More] Common.js:1596:5
      CRM.angRequires .../civicrm/js/Common.js:1596:5
      <anonymous> .../civicrm/ajax/volunteer-angular-modules:27:33
      <anonymous> .../civicrm/ajax/volunteer-angular-modules:25:2

      Error: [$injector:modulerr] http://errors.angularjs.org/...
      G/< .../civicrm/bower_components/angular/angular.min.js:6:426
      g/< .../civicrm/bower_components/angular/angular.min.js:40:292
      q .../civicrm/bower_components/angular/angular.min.js:7:369
      g .../civicrm/bower_components/angular/angular.min.js:39:382
      fb .../civicrm/bower_components/angular/angular.min.js:43:381
      c .../civicrm/bower_components/angular/angular.min.js:21:19
      Gc .../civicrm/bower_components/angular/angular.min.js:21:332
      se .../civicrm/bower_components/angular/angular.min.js:20:1
      <anonymous> .../civicrm/bower_components/angular/angular.min.js:323:54
      i .../civicrm/bower_components/jquery/dist/jquery.min.js:2:27444
      fireWith .../civicrm/bower_components/jquery/dist/jquery.min.js:2:28213
      ready .../civicrm/bower_components/jquery/dist/jquery.min.js:2:30004
      K .../civicrm/bower_components/jquery/dist/jquery.min.js:2:30366

      Technical Background

      At or around v4.7.21, CiviCRM introduced new, more elegant ways of creating new Angular base pages and declaring Angular module dependencies for those pages. See https://docs.civicrm.org/dev/en/master/framework/angular/loader/ for details.

      What's a base page? Basically, it's CiviCRM's harness for Angular. It's responsible for things like deciding which Angular modules to load, resolving dependencies, and telling Angular where on the page to embed itself.

      During the development of CiviVolunteer version 2.0 (i.e., well before the release of CiviCRM 4.7.21), it became evident that tacking the extension's Angular module onto CiviCRM core's base page (civicrm/a) was infeasible. CiviVolunteer needed more control over what modules were loaded than the existing programming interfaces would allow. Because all routes are loaded on initialization of the app, various permission checks (e.g., relating to CiviCase) were performed unnecessarily for someone trying to use CiviVolunteer. For use cases where CiviVolunteer users are not admins, these checks resulted in permissions errors that made the system unusable.

      CiviVolunteer addressed this problem by establishing its own Angular base page using the best programming interfaces available at the time: subclassing. Extending classes related to the core base page allowed the extension to exclude troublesome modules from loading on its civicrm/vol base page.

      It would seem that whatever changes were made to these upstream classes to allow the more elegant approach broke the subclasses.




            • Assignee:
              pittstains Frank J. Gómez
              bobs0 Bob Silvern
            • Votes:
              2 Vote for this issue
              14 Start watching this issue


              • Created:

                Time Tracking

                Original Estimate - Not Specified
                Not Specified
                Remaining Estimate - 0 minutes
                Time Spent - 4 days, 1 hour
                4d 1h