Как заставить Angular2 + Router работать в гибридном приложении Angular2 + / AngularJS?

Question

Как заставить Angular2 + Router работать в гибридном приложении Angular2 + / AngularJS?

Я работаю с руководством по обновлению Angular , чтобы узнать, как внедрять директивы AngularJS в приложение Angular . Я создал приложение Angular с использованием Angular CLI и добавил довольно простой модуль AngularJS в качестве зависимости.

Поскольку я добавил RouterModule в Angular, у меня возникает следующая ошибка:

ERROR Error: Uncaught (in promise): Error: Trying to get the AngularJS injector before it being set.

    Router Event: NavigationError
        NavigationError(id: 1, url: '/', error: Error: Trying to get the AngularJS injector before it being set.)
            NavigationError {id: 1, url: "/", error: Error: Trying to get the AngularJS injector before it being set.
                at injectorFactory (http://loca…}

Полагаю, проблема в том, что я показываю обновленную директиву внутри Angular <router-link>

Вот как я обновляю свой компонент AngularJS внутри моего приложения Angular:

// ng1.component.wrapper.ts
import { Directive, ElementRef, Injector, Input } from '@angular/core';
import { UpgradeComponent } from '@angular/upgrade/static';

@Directive({ selector: 'ng1' })
export class Ng1ComponentWrapper extends UpgradeComponent {
    @Input() value1: string;
    @Input() value2: string;

    constructor(elementRef: ElementRef, injector: Injector) {
        super('ng1', elementRef, injector);
    }
}

А вот и мой app.module.ts:

// app.module.ts

// Import AngularJS app
import '../ng1/ng1.module';

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

// -----------------------------
// ---- Upgraded components ----
// -----------------------------
import { Ng1ComponentWrapper } from '../ng1/ng1.component.wrapper';

// -----------------------------
// ---- Downgrade components ----
// -----------------------------
import { NG1_APP_MODULE_NAME } from '../ng1/ng1.module';
declare var angular: any;

angular.module(NG1_APP_MODULE_NAME)
    .directive('appRoot', downgradeComponent({ component: AppComponent }))

@NgModule({
    declarations: [
        AppComponent,
        Ng1ComponentWrapper
    ],
    imports: [
        AppRoutingModule,
        BrowserModule,
        UpgradeModule,
    ],
    providers: [],
    bootstrap: [ AppComponent ],
})
export class AppModule {
    constructor(public upgrade: UpgradeModule) {}
}

А вот файл main.ts, в который я загружаю приложение Angular и AngularJS

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

import { NG1_APP_MODULE_NAME } from './ng1/ng1.module';
import { setUpLocationSync } from '@angular/router/upgrade';

if (environment.production) {
    enableProdMode();
}


// This is the entry point for the AngularJS/Angular hybrid application.
// It bootstraps the Angular module 'AppModule', which in turn bootstraps
// the AngularJS module.
platformBrowserDynamic().bootstrapModule(AppModule)
    .then(ref => {
        console.log('Angular app bootstrapped !')
        const upgrade = (<any>ref.instance).upgrade;
        upgrade.bootstrap(document.body, [NG1_APP_MODULE_NAME]);
        console.log('AngularJS app bootstrapped !');
        setUpLocationSync(upgrade);
    })
    .catch(err => console.error('An error occured while bootstrapping the Angular app', err));

Вот основной файл модуля AngularJS ng1.module.ts

'use strict';

import 'angular';

import 'xcomponent-widgets/common-module';
import { Ng1Component } from './ng1.component';

export const NG1_APP_MODULE_NAME = 'test-webapp';

declare var angular: any;

angular.module(NG1_APP_MODULE_NAME, [
    'common-module'
])
.config(['$locationProvider', ($locationProvider) => {
    $locationProvider.html5Mode(true);
}])
.component('ng1', Ng1Component);

И, наконец, вот мой роутер

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { Ng1Component } from './component/ng1.component.ts';

export const appRoutes: Routes = [
    {
        path: 'test',
        component: Ng1ComponentWrapper,
        data: { title: 'Test' }
    },
    { path: 'not-found', component: NotFoundComponent },
    { path: '', redirectTo: 'test', pathMatch: 'full' }, // Redirect to homepage by default
    { path: '**', redirectTo: 'not-found', pathMatch: 'full' } // If no route defined, redirect to page not found
];

@NgModule({
    imports: [ RouterModule.forRoot(appRoutes, { enableTracing: true, useHash: false }) ],
    exports: [ RouterModule ]
})
export class AppRoutingModule {}

Ng1Component использует обновленную директиву с Ng1ComponentWrapper

Я использую Angular 7.1.4 и AngularJS 1.6.4

Answer 1

Я нашел, как это исправить.

Проблема заключалась в том, что RouterModule инициализировал навигацию до полной загрузки AngularJS.

В моем файле роутера я добавил initialNavigation: false

@NgModule({
  imports: [ RouterModule.forRoot(appRoutes, {
    enableTracing: true,
    useHash: false,
    initialNavigation: false
  }) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

И я вызвал функцию router.initialNavigation() после загрузки AngularJS:

platformBrowserDynamic().bootstrapModule(AppModule)
  .then(ref => {
    console.log('Angular app bootstrapped !');
    const upgrade = (<any>ref.instance).upgrade;
    const router = (<any>ref.instance).router;
    upgrade.bootstrap(document.body, [NG1_APP_MODULE_NAME]);
    console.log('AngularJS app bootstrapped !');
    setUpLocationSync(upgrade);
    router.initialNavigation();
  })
  .catch(err => console.error('An error occured while bootstrapping the Angular app', err));

Надеюсь, это поможет другим людям