ngUpgrade升级Angular时路由失效及$injector未定义问题求助

我来帮你搞定这两个升级时的典型问题，都是混合应用过渡阶段容易踩的坑，咱们一个个来解决：

一、修复AngularJS $injector未定义错误 #

你遇到的这个错误，本质是Angular代码里尝试获取AngularJS的注入器时，要么AngularJS还没初始化完成，要么获取方式不对。咱们按正确的姿势来：

1. 先把UpgradeModule配置对 #

首先得确保AppModule里正确导入并使用UpgradeModule，而且要把AngularJS的启动逻辑移到ngDoBootstrap里，别用原来的angular.bootstrap或者ng-app了：

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],
  bootstrap: [] // 这里留空，因为要混合启动Angular和AngularJS
})
export class AppModule {
  constructor(private upgrade: UpgradeModule) {}

  ngDoBootstrap() {
    // 在这里启动你的AngularJS应用，替换原来的启动代码
    this.upgrade.bootstrap(document.body, ['你的AngularJS模块名'], { strictDi: true });
  }
}

2. 正确获取AngularJS服务 #

在Angular中调用AngularJS服务，绝对不能直接用angular.injector()这种全局方式，一定要通过UpgradeModule的注入器来拿。比如你要升级oldDataService这个AngularJS服务：

import { Injectable, Inject } from '@angular/core';
import { UpgradeModule } from '@angular/upgrade/static';

@Injectable()
export class UpgradedDataService {
  private oldAngularJSDataService: any;

  constructor(@Inject(UpgradeModule) upgrade: UpgradeModule) {
    // 从UpgradeModule的注入器里获取AngularJS服务
    this.oldAngularJSDataService = upgrade.injector.get('oldDataService');
  }

  // 封装一下AngularJS服务的方法，供Angular组件调用
  fetchData() {
    return this.oldAngularJSDataService.fetchData();
  }
}

然后别忘了在AppModule的providers里注册这个升级后的服务：

@NgModule({
  // ...其他配置
  providers: [UpgradedDataService]
})

这样就不会出现$injector未定义的问题了，因为我们是在AngularJS初始化完成后，通过官方提供的UpgradeModule来获取注入器的。

二、修复移到AppModule后Angular路由失效的问题 #

把AngularJS启动逻辑移到AppModule后，路由失效通常是因为Angular和AngularJS的路由冲突了，或者Angular的路由没有正确初始化。咱们一步步调整：

1. 确保Angular路由模块正确导入 #

先在AppModule里配置好Angular的路由：

import { RouterModule, Routes } from '@angular/router';
import { YourAngularComponent } from './your-angular.component';

// 定义你的Angular路由
const routes: Routes = [
  { path: 'angular-page', component: YourAngularComponent },
  // 其他Angular路由...
  { path: '**', redirectTo: '/' } // 兜底路由，注意和AngularJS路由配合
];

@NgModule({
  imports: [
    BrowserModule,
    UpgradeModule,
    RouterModule.forRoot(routes) // 导入Angular路由模块
  ],
  // ...其他配置
})

2. 配置混合路由的共存策略 #

混合应用里，最好让Angular路由先处理请求，没匹配到的再交给AngularJS路由。用哈希路由（HashLocationStrategy）能避免很多路径冲突问题：

import { LocationStrategy, HashLocationStrategy } from '@angular/common';

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { useHash: true }) // 启用哈希路由
  ],
  providers: [
    { provide: LocationStrategy, useClass: HashLocationStrategy }
  ],
  // ...其他配置
})

3. 让AngularJS路由避开Angular的路径 #

在AngularJS的路由配置里，要排除掉Angular负责的路径，不然会被AngularJS拦截：

angular.module('你的AngularJS模块名').config(['$routeProvider', function($routeProvider) {
  $routeProvider
    // 对于Angular处理的路径，设置空模板就行，让Angular路由接管
    .when('/angular-page', { template: '' })
    // 你的AngularJS路由正常配置
    .when('/angularjs-page', {
      templateUrl: 'angularjs-page.html',
      controller: 'AngularJSController'
    })
    .otherwise({ redirectTo: '/' });
}]);

4. 确保根组件里有<router-outlet> #

Angular的路由需要<router-outlet>来渲染组件，所以在你的AppComponent模板里一定要加上：

<!-- app.component.html -->
<router-outlet></router-outlet>
<!-- 如果还要保留AngularJS的内容，加上ng-view -->
<div ng-view></div>

5. 检查启动顺序 #

ngDoBootstrap里的启动顺序是对的，UpgradeModule会先初始化Angular的模块，再启动AngularJS，所以只要配置正确，路由应该能正常工作。如果还是有问题，打开浏览器控制台看看有没有路由匹配失败的错误提示，排查路径是否冲突。

额外调试小技巧 #

• 打开开发者工具的控制台，看有没有具体的路由错误信息，比如“Cannot match any routes”。
• 检查Angular和AngularJS的路由路径有没有重复，确保相同路径不会被两边同时处理。
• 确认所有升级的组件、服务都正确注册到了AppModule里，没漏掉declarations或providers。

内容的提问来源于stack exchange，提问作者tangokhi