Angular2+路由导航时重复加载资源问题排查求助

我来帮你定位这个问题！从你的代码和描述来看，核心问题出在路由模块导入顺序和可能的导航链接使用方式上，咱们一步步拆解：

1. 最直接的原因：导航链接未使用Angular的routerLink指令 #

Angular的客户端路由能实现无刷新跳转，核心是依赖routerLink指令拦截浏览器的默认跳转行为。如果你的Starter模块导航用了普通的<a href="/app/OrderCreate">标签，浏览器会直接发起全页HTTP请求，导致bundle重新下载；而Admin模块的导航如果用了<a routerLink="/admin/dashboard2">，就会走Angular的客户端路由，不会刷新页面。

解决方案：
检查Starter组件模板中的导航链接，全部替换为routerLink：

<!-- 错误写法 -->
<a href="/app/OrderCreate">创建订单</a>

<!-- 正确写法 -->
<a routerLink="/app/OrderCreate">创建订单</a>

同时确保Starter所在的模块（比如StarterModule）已经导入了RouterModule，否则routerLink指令无法生效。

2. 路由模块导入顺序错误（关键问题） #

在你的AppRoutingModule中，路由模块的导入顺序完全反了！Angular规定：RouterModule.forRoot()（根路由配置）必须第一个被导入，因为它负责初始化整个应用的路由器实例；而特性模块的forChild()路由（比如AdminRoutingModule、StarterRoutingModule）要在根路由之后导入，这样才能把特性路由正确注册到根路由器中。

你当前的导入顺序是先导入特性路由，再导入根路由，这会导致Starter的路由配置没有被正确识别为客户端路由，浏览器会把它当成普通的服务器路由，从而触发全页刷新。

修复后的AppRoutingModule代码：

import { StarterComponent } from './../starter/starter.component';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { StarterRoutingModule } from "../starter/starter-routing/starter-routing.module";
import { AdminRoutingModule } from "../admin/admin-routing/admin-routing.module";

@NgModule({
 imports: [
  // 根路由必须第一个导入
  RouterModule.forRoot([
   // { path: '', redirectTo: 'starter2', pathMatch: 'full' },
   { path: 'starter', component: StarterComponent }
  ]),
  // 特性路由在根路由之后导入
  AdminRoutingModule,
  StarterRoutingModule
 ],
 declarations: [],
 exports: [ RouterModule]
})
export class AppRoutingModule { }

3. 潜在的路由冗余问题（可选优化） #

你在StarterRoutingModule中配置了/app/*路由指向StarterComponent，同时在AppRoutingModule的根路由中又配置了/starter指向同一个组件，这会导致路由结构混乱，建议清理掉其中一个不需要的路由配置，保持路由逻辑清晰。

按照上面的步骤修改后，重新启动应用，点击Starter模块的导航链接，应该就能实现无刷新跳转了。

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