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
相关产品推荐
相关产品推荐

