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

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

Затем у меня есть файл входа для моего приложения 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() {
  }
};

ИЗМЕНИТЬ2

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

ИЗМЕНИТЬ 3

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


angular angularjs ng-upgrade angular-hybrid
person antjanus    schedule 01.05.2017    source источник
comment
Я избавился от Babel и Webpack, та же проблема. Тестовый пример, как я описал его выше   -  person antjanus    schedule 08.05.2017

Ответы (1)


arrow_upward
2
arrow_downward

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

Я изменил порядок импорта в 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
person antjanus    schedule 08.05.2017
comment
Вы также могли бы сделать это, установив порядок для старых сценариев. github.com/angular/angular-cli/wiki/stories-global- скрипты - person James; 08.05.2017
comment
проблема в том, что я хочу перекрестно опылять компоненты, чтобы мне было легче переходить к приложениям. Я бы предпочел сделать это с помощью import/requires, а не зависеть от глобального доступа к AngularJS. - person antjanus; 08.05.2017
comment
После прочтения вашего блога я вроде как понимаю, почему вы пошли таким путем. Желание использовать код Angular2 для большинства ваших новых задач, оставляя устаревшие вещи в старом angularJS. Это будет грязная проблема на спуске, но получайте удовольствие. - person James; 08.05.2017
comment
@Джеймс мой блог? Кажется, я ничего не упоминал там о переходе. Но все равно спасибо за прочтение! :) - person antjanus; 10.05.2017