AngularJS v1x. is not loaded in hybrid angular-cli app

Question

I am combining an angular-cli project with an AngularJS project to slowly upgrade an application. The AngularJS application already uses TypeScript and I am letting the cli handling bundling the application. I have loosely followed Victor Savkin's shell upgrade guide and the official Updating from AngularJS guide but am encountering an error.

When ngDoBootstrap is called in the below module, a promise is rejected with the following error.

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    UpgradeModule,
    SharedModule,
    CoreModule,
    AppRoutingModule,
  ],
  entryComponents: [ AppComponent ],
})
export class AppModule {

  constructor(private upgrade: UpgradeModule) { }

  ngDoBootstrap() {
    this.upgrade.bootstrap(document.body, [ng1AppModule], { strictDi: true });
  }
}

Resulting in the error

 core.es5.js:1020 ERROR Error: AngularJS v1.x is not loaded!
     at Object.noNg (static.es5.js:15)
     at module$1 (static.es5.js:55)
     at UpgradeModule.webpackJsonp.../../../upgrade/@angular/upgrade/static.es5.js.UpgradeModule.bootstrap
 (static.es5.js:1249)
     at AppModule.webpackJsonp.../../../../../src/app/app.module.ts.AppModule.ngDoBootstrap
 (app.module.ts:51)
     at PlatformRef_.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._moduleDoBootstrap
 (core.es5.js:4549)
     at core.es5.js:4508
     at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke
 (zone.js:392)
     at Object.onInvoke (core.es5.js:3890)
     at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke
 (zone.js:391)
     at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run (zone.js:142)

Beautifully

Answer 1

The @angular/upgrade/static library exposes a setAngularJSGlobal function. You can use this to load AngularJS into the Angular library.

import * as angular from 'angular';
import { setAngularJSGlobal } from '@angular/upgrade/static';

setAngularJSGlobal(angular);

Historical Note: The function was previously named setAngularLib.

Beautifully