Angular 2+ can't find Angular 1.X to bootstrap

Question

I\'m trying to bootstrap an Angular 1.X app with Angular 2+ (Angular 4.1.0 at the time of writing this question). I followed the online guide to the T but can\'t seem to mak

Answer 1

I hate to answer my own question (and thus not give credit to everyone that helped, thank you!) but here is what fixed it.

I changed the order of imports in main.ts the entry file! :)

Here's what the new version looks like:

import app from '../app/app.temp';

import 'core-js/es7/reflect';
import 'zone.js';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { UpgradeModule } from '@angular/upgrade/static';
import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule).then(platformRef => {
  console.log('angular 2+ bootstrapped');
  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
  console.log('getting update module');
  console.log('app', app)
  upgrade.bootstrap(document.body, [app.name], { strictDi: true})
   console.log('should be bootstrapped')
})

I basically just had to import the AngularJS 1.X app before zone.js. I'm not sure why that is but it worked flawlessly.

EDIT

I filed an issue on Angular's repo and got an "official" answer. It works on 4.1.0-rc.0 and above. There is a method to manually set a reference to AngularJS instead of having the system try to get it from the window object. As it is, AngularJS seems to attach itself to window when it runs even when it's bundled; however, it does so "too late" (which is why my fix works).

So here's what you can do:

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

setAngularLib(angular);
// do your bootstrap here