How to get Angular2+ Router working on a Angular2+/AngularJS hybrid application?

How to get Angular2+ Router working on a Angular2+/AngularJS hybrid application?

I'm working through Angular's upgrade guide to learn how to embed AngularJS directives in an Angular app. I've created a bare-bones Angular app using the Angular CLI and added a pretty simple AngularJS module as a dependency.

Since I've added a RouterModule to Angular, I have the following error:

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…}

My guess is that the problem comes from the fact that I'm displaying some Upgraded Directive inside the Angular <router-link>

Here's how I'm upgrading my AngularJS component inside my Angular app:

// 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);
    }
}

And here's my 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) {}
}

And here is the main.ts file where I bootstrap both Angular and AngularJS app

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));

Here is the main AngularJS module file 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);

And finally here is my router

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 uses an upgraded directive from Ng1ComponentWrapper

I'm using Angular 7.1.4 and AngularJS 1.6.4