Blank screen on CiviVolunteer pages after upgrade to Civi 4.7.21

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.