Angular 2+ не может найти Angular 1.X для начальной загрузки

Я пытаюсь загрузить приложение Angular 1.X с Angular 2+ (Angular 4.1.0 на момент написания этого вопроса). Я следовал за онлайн-гидом к T, но не могу добиться успеха.

Я использую гибрид ES2015+ (скомпилированный через Babel) и TypeScript. Все компилируется правильно, и я могу успешно запустить Angular 1 и Angular 2 по отдельности. Они собираются вместе, используя Webpack, если это имеет значение.

Вот что мой входной файл Angular 1.X (app.ts) примерно выглядит так:

import * as angular from 'angular';

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

Для простоты я удалил все зависимости из основного приложения, чтобы быть уверенным, что это не функция run/config или одна из зависимостей. Я проверил с функциями конфигурации / запуска, чтобы увидеть, если какие-либо из этих ошибок запуска или выбросить, но они не делают.

Затем у меня есть файл ввода для моего приложения Angular 2+ (который я также использую в качестве файла ввода для Webpack), который называется main.ts который выглядит так:

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')
})

Процесс не проходит после console.log('app', app) линия. Журнал показывает, что app действительно, пример приложения Angular 1.X. Но процесс начальной загрузки все еще терпит неудачу.

Любые идеи о том, что я не делаю правильно?

РЕДАКТИРОВАТЬ

Вот мой app.module файл:

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

Я догадываюсь, что Angular 2+ зависит от того, находится ли AngularJS 1.X уже на объекте окна. Я использую AngularJS 1.X из модуля. Я буду обновлять, как я работаю над этим. Я ответил на несколько комментариев ниже. В настоящее время я использую как можно более простой пример, а для AngularJS 1.X я буквально запускаю приложение barebones, которое выходит из системы, если оно было загружено с помощью .run

РЕДАКТИРОВАТЬ 3

Я разместил ответ ниже. То, к чему это сводилось, было упорядочением импорта в main.ts файл (входной файл). Просто импортируйте приложение AngularJS 1.X перед импортом zone.js исправил проблему.

1 ответ

Решение

Ненавижу отвечать на свой вопрос (и, следовательно, не отдаю должное всем, кто помог, спасибо!), Но вот что исправило это.

Я изменил порядок импорта в main.ts входной файл!:)

Вот как выглядит новая версия:

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')
})

Мне просто нужно было импортировать приложение AngularJS 1.X zone.js, Я не уверен, почему это так, но это сработало безупречно.

РЕДАКТИРОВАТЬ

Я подал вопрос о репо Angular и получил "официальный" ответ. Работает на 4.1.0-rc.0 и выше. Существует метод для ручной установки ссылки на AngularJS вместо того, чтобы система пыталась получить ее из window объект. На самом деле AngularJS, похоже, присоединяется к window когда он работает, даже когда он в комплекте; однако, он делает это "слишком поздно" (именно поэтому мое исправление работает).

Итак, вот что вы можете сделать:

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

setAngularLib(angular);
// do your bootstrap here
Другие вопросы по тегам