You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Angular 19.2.14升级后导航时URL不更新问题求助

Angular 19.2.14升级后导航时URL不更新问题求助

大家好,我最近把Angular项目从18.x.x升级到了19.2.14,本来是为了测试我的spec文件,结果遇到了一个很奇怪的路由问题:

  • 导航时Angular内部已经正确加载了目标组件,但浏览器地址栏完全没更新
  • 因为URL不更新,导致Auth守卫工作异常,组件也拿不到关键数据
  • 我打了日志发现,重定向/导航操作其实已经完成了,Angular本身没有抛出任何错误,就像什么都没发生一样

接下来是我的项目配置,麻烦帮忙看看哪里出问题了:

1. package.json 依赖配置

{
  "name": "alarmClient",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "start-all-hosts": "ng serve --host 0.0.0.0",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "lint": "ng lint"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^19.2.14",
    "@angular/common": "^19.2.14",
    "@angular/compiler": "^19.2.14",
    "@angular/core": "^19.2.14",
    "@angular/forms": "^19.2.14",
    "@angular/material": "^19.2.14",
    "@angular/platform-browser": "^19.2.14",
    "@angular/platform-browser-dynamic": "^19.2.14",
    "@angular/router": "^19.2.14",
    "angular-material-icons": "^0.7.1",
    "jwt-decode": "^4.0.0",
    "material-icons": "^1.13.12",
    "rimraf": "^6.0.1",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "typescript-cookie": "^1.0.6",
    "uuid": "^11.0.5",
    "zone.js": "~0.15.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^19.2.15",
    "@angular/cli": "^19.2.15",
    "@angular/compiler-cli": "^19.2.14",
    "@types/jasmine": "~5.1.0",
    "@types/jsonwebtoken": "^9.0.10",
    "angular-eslint": "19.0.0",
    "eslint": "^9.15.0",
    "eslint-config-prettier": "^10.0.1",
    "eslint-plugin-prettier": "^5.2.3",
    "jasmine-core": "~5.2.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.5.2",
    "typescript-eslint": "8.16.0"
  }
}

2. 路由配置 (app.routing.module.ts)

import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { VideoDisplayContainerComponent } from "../components/video-display-container/video-display-container.component";
import { LoginComponent } from "../components/login/login.component";
import { AuthGuardService } from "../services/auth-guard.service";
import { MapsComponent } from "src/components/maps/maps.component";
import {IsLoggedInGuardService} from '../services/is-logged-in-guard.service';

export const routes: Routes = [
  { 
    path: "", 
    component: VideoDisplayContainerComponent, 
    canActivate: [AuthGuardService], 
  },
  { 
    path: "cams", 
    component: VideoDisplayContainerComponent, 
    canActivate: [AuthGuardService] 
  },
  { 
    path: "maps", 
    component: MapsComponent, 
    canActivate: [AuthGuardService] 
  },
  { 
    path: "login", 
    component: LoginComponent, 
    canActivate: [IsLoggedInGuardService] 
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)], // Use RouterModule.forRoot for the root module
  exports: [RouterModule],
})
export class AppRoutingModule {}

3. 根模块配置 (app.module.ts)

@NgModule({
  declarations: [
    // 组件声明(省略)
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes),
    BrowserAnimationsModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    AppRoutingModule,
    RouterOutlet,
    MatIconModule,
    MatButtonModule,
    MatDividerModule,
    MatFormFieldModule,
    MatSelectModule,
    MatDialogModule,
    MatInputModule,
    MatMenuModule,
    MatTooltipModule,
    AngularAssetModule,
    SharedModule,
    NgOptimizedImage,
    // Testing Modules
    BrowserDynamicTestingModule,
    NoopAnimationsModule,
  ],
  providers: [
    HttpClient,
    RestService,
    AuthService,
    provideRouter(routes, withComponentInputBinding()),
    // {provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true},
    {provide: APP_BASE_HREF, useValue: '/'},
    {provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true},
    DialogService,
    AssetsService,
    InterfacesService,
    { provide: LOCALE_ID, useValue: "en-GB" },
    provideAnimationsAsync(), // Optionally set the default locale for the app
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

我检查过守卫的逻辑,在Angular 18里是完全正常的,升级后就出现这个问题了。有没有人遇到过类似的情况?或者能从我的配置里发现什么问题吗?

内容来源于stack exchange

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.07 08:53:01