Angular 2+ cannot find Angular 1.X to boot

Question

I am trying to download an Angular 1.X application from Angular 2+ (Angular 4.1.0 at the time of this writing). I followed the online guide to T, but it seems that it can not move forward.

I am using a hybrid of ES2015 + (compiled via Babel) and TypeScript. Everything compiles correctly, and I can successfully run both Angular 1 and Angular 2. They compile together using Webpack, if that matters.

This is what my Angular 1.X file ( app.ts ) looks like:

 import * as angular from 'angular'; export default angular.module('app', []) .run(function() { console.log('Angular 1 is running!')}) 

For simplicity, I removed all the dependencies from the main application so that I can make sure that this is not a run / config function or one of the dependencies. I tested with the config / run functions to see if any of these start or throw errors exist, but they do not.

Then I have an input file for my Angular 2+ application (which I also use as the input file for Webpack) called main.ts , which looks like this:

 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'; import app from '../app/app'; 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') }) 

The process crashes after the line console.log('app', app) . The magazine shows that the app indeed an instance of the Angular 1.X application. But the bootstrap process is still not working.

Any ideas on what I'm not doing right?

EDIT

Here is my app.module file:

 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { UpgradeModule } from '@angular/upgrade/static'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, UpgradeModule ], declarations: [ AppComponent ], entryComponents: [ AppComponent ] }) export class AppModule { constructor(protected upgrade: UpgradeModule) {} ngDoBootstrap() { } }; 

EDIT2

My guess is that Angular 2+ depends on the fact that AngularJS 1.X is already on the window object. I am running AngularJS 1.X from inside the module. I will update when I work on it. I answered a few comments below. I am currently using the simplest example possible, and for AngularJS 1.X, I literally run a bubbly application that logs out if it is loaded via .run

EDIT 3

I posted the answer below. It main.ts import ordering in the main.ts file (recording file). Just importing the AngularJS 1.X application before importing zone.js fixed the problem.

Answer 1

I hate to answer my question (and thus do not give credit to everyone who helped, thanks!), But here's the fix.

I changed the import order in the main.ts input 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 application to zone.js I don’t know why this is so, but it worked flawlessly.

EDIT

I posted an Angular repo question and got an “official” answer. It runs on 4.1.0-rc.0 and higher. There is a way to manually set the link to AngularJS instead of the system trying to get it from the window object. Be that as it may, AngularJS seems to attach to the window when it works, even when it comes with the kit; however, he does it “too late” (which is why my fix works).

So what you can do:

 import { setAngularLib } from '@angular/upgrade/static'; import * as angular from 'angular'; setAngularLib(angular); // do your bootstrap here 

Answer 2

Demonstration of AngularJS / @ Angular bootable hybrid application

  <script src="//unpkg.com/angular/angular.js"></script> <script src="script.js"></script> <body xx-ng-app="myJsApp"> <my-app>Loading AppComponent content here ...</my-app> <hr> <js-app>Loading {{'js-app component here...'}}</js-app> </body> 

script.js

 angular.module("myJsApp", []); angular.module("myJsApp").component("jsApp", { template: "<p>Hello {{'AngularJS'}}</p>", controller: function() { console.log("jsApp component started"); } }); 

Main.ts

 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; import { UpgradeModule } from '@angular/upgrade/static'; platformBrowserDynamic().bootstrapModule(AppModule) .then(platformRef => { console.log("BOOTSTRAPING AngularJS"); const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; upgrade.bootstrap(document.body, ['myJsApp'], {strictDi: true}); }); 

This example loads the AngularJS application using the @ Angular update module.

See Angular Update Guide - Flexible Bootstrap Applications for more information.

DEMO on PLNKR

Answer 3

My guess is that you still have a problem in your .module application. I had a lot of problems with this, and with typescript these errors sometimes fail. I could not be more specific because you did not publish your full app.ts