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