Angular Nx中如何实现多应用间的页面跳转？

针对根目录下部署多个带共享Libs的Angular应用场景，下面给出几种实用的路由跳转配置方案：

1. 基础跳转：直接使用window.location #

这是最直观的方式，适合不需要融入Angular路由体系的简单场景：

• 组件内触发跳转至另一应用根路径：

// app1/src/app/components/nav.component.ts
jumpToApp2() {
  window.location.href = '/app2'; // 替换为你的app2实际部署路径
}

• 跳转至目标应用的特定路由：

jumpToApp2UserProfile(userId: string) {
  window.location.href = `/app2/profiles/${userId}`;
}

2. 路由体系内管理：使用externalUrlRedirectResolver #

如果想在Angular路由规则中统一管理外部应用跳转，避免直接操作window，可以用官方提供的解析器：

步骤1：配置外部路由规则 #

// app1/src/app/app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule, externalUrlRedirectResolver } from '@angular/router';
import { ActivatedRouteSnapshot } from '@angular/router';

const routes: Routes = [
  // 应用内部路由
  { path: 'home', component: HomeComponent },
  // 跳转至app2根路径
  { 
    path: 'to-app2', 
    resolve: { url: externalUrlRedirectResolver },
    data: { externalUrl: '/app2' }
  },
  // 跳转至app2的动态路由
  { 
    path: 'to-app2-user/:id', 
    resolve: { url: externalUrlRedirectResolver },
    data: { 
      externalUrl: (route: ActivatedRouteSnapshot) => `/app2/users/${route.paramMap.get('id')}`
    }
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

步骤2：模板中使用路由链接 #

<!-- app1/src/app/components/nav.component.html -->
<a routerLink="/to-app2">跳转到应用2</a>
<a [routerLink]="['/to-app2-user', 456]">跳转到应用2的用户456页面</a>

3. Monorepo场景优化（Nx/Angular Workspace） #

如果多应用在同一Monorepo中管理，可以通过共享Lib统一管理跳转路径：

• 在共享Lib中定义路由常量：

// libs/shared/src/constants/app-paths.ts
export const APP_PATHS = {
  APP1: {
    DASHBOARD: '/app1/dashboard'
  },
  APP2: {
    ROOT: '/app2',
    USER_PROFILE: (userId: string) => `/app2/profiles/${userId}`
  }
};

• 在各应用中导入使用：

// app1/src/app/components/nav.component.ts
import { APP_PATHS } from '@your-workspace/shared';

goToApp2User(userId: string) {
  window.location.href = APP_PATHS.APP2.USER_PROFILE(userId);
}

关键注意事项 #

• BaseHref配置：每个应用的angular.json需配置对应baseHref，比如app1设为"baseHref": "/app1/"，app2设为"baseHref": "/app2/"，避免路由冲突。
• 跨域场景处理：若应用部署在不同域名下，只能通过window.location或window.open跳转，无法借助Angular路由体系。
• 状态传递：需在应用间传递数据时，可通过URL参数、localStorage或sessionStorage实现，例如：

// app1中存储状态
sessionStorage.setItem('from-app1-data', JSON.stringify({ userId: 456 }));
// app2中读取状态
const app1Data = JSON.parse(sessionStorage.getItem('from-app1-data') || '{}');

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