Javascript 如何获得Angular2+；在角度2+上工作的路由器/AngularJS混合应用程序？

如何让Angular2+路由器在Angular2+/AngularJS混合应用程序上工作

我正在通过Angular的升级指南学习如何在Angular应用程序中嵌入AngularJS指令。我使用Angular CLI创建了一个简单的AngularJS应用程序，并添加了一个非常简单的AngularJS模块作为依赖项

由于我向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

以下是我在AngularJS应用程序中升级AngularJS组件的方法：

// 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

文件，我在其中引导AngularJS和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));

最后是我的路由器

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，我发现了如何修复它

问题是RouterModule在AngularJS完全加载之前初始化了导航

在我的路由器文件中，我添加了

initialNavigation:false

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

加载AngularJS后，我调用了函数

router.initialNavigation（）

：

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

platformBrowserDynamic（）.bootstrapModule（AppModule）
。然后（ref=>{
log（'Angular app bootstrapped！'）；
const upgrade=（ref.instance）.upgrade；
常量路由器=（ref.instance）.router；
upgrade.bootstrap（document.body[NG1_APP_MODULE_NAME]）；
log（'AngularJS应用程序引导！'）；
setUpLocationSync（升级）；
router.initialNavigation（）；
})
.catch（err=>console.error（'引导Angular应用程序时发生错误'，err））；

---

我希望它能帮助其他人

谢谢！你是一个传奇-我已经跟随了混合应用程序指南吨，但你有完全相同的问题，我和这是一个完美的解决方案-再次感谢！

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