Angular 12 子路由 404 在刷新时丢失上下文答案

【问题标题】：Angular 12 sub routes 404 loosing context on refreshAngular 12 子路由 404 在刷新时丢失上下文
【发布时间】：2022-01-08 23:50:52
【问题描述】：

我遇到了 12 角子路线的问题。我可以很好地导航到子路线，但是当我刷新页面时，我失去了上下文。我在 localhost:4200 本地运行它这是我在网络选项卡和刷新时在屏幕上得到的图像 enter image description here

这里是源代码链接：https://github.com/Stanmozolevskiy/Portfolio

这里是路由组件：

import { SinglePortfolioComponent } from './portfolio/single-portfolio/single-portfolio.component';
import { HomeComponent } from './home/home.component';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ContactComponent } from './contact/contact.component';
import { AboutComponent } from './about/about.component';
import { PortfolioComponent } from './portfolio/portfolio.component';

const routes: Routes = [
  {path: '', component: HomeComponent},
  {path: 'contact', component: ContactComponent},
  {path: 'about', component: AboutComponent},
  {path: 'about/portfolio', component: AboutComponent},
  {path: 'portfolio', component: PortfolioComponent},
  {path: 'portfolio/:query', component: SinglePortfolioComponent},
];

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

这里是应用模块：

import { AngularFireModule } from '@angular/fire';
import { AngularFireFunctionsModule } from '@angular/fire/functions';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { ContactComponent } from './contact/contact.component';
import { ReactiveFormsModule } from '@angular/forms';
import { AboutComponent } from './about/about.component';
import { GetintouchComponent } from './getintouch/getintouch.component';
import { PortfolioComponent } from './portfolio/portfolio.component';
import { SinglePortfolioComponent } from './portfolio/single-portfolio/single-portfolio.component';
import { HeaderComponent } from './common/header/header.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AsideComponent } from './common/aside/aside.component';
import { ParagraphComponent } from './common/paragraph/paragraph.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ContactComponent,
    AboutComponent,
    GetintouchComponent,
    PortfolioComponent,
    SinglePortfolioComponent,
    HeaderComponent,
    AsideComponent,
    ParagraphComponent 
  ],
  imports: [
    AppRoutingModule,
    BrowserModule,
    FontAwesomeModule,
    ReactiveFormsModule ,
    AngularFireFunctionsModule,
    NgbModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

我很乐意尝试任何建议，在此先感谢您！

【问题讨论】：

“失去上下文”是什么意思？刷新时会丢失哪些信息？

标签： node.js angular routes angular-ui-router

【解决方案1】：

这个问题的解决方法：更改您的网络服务器配置以匹配您的位置策略或使用 HashLocationStrategy，如下所示：imports: [RouterModule.forRoot(appRoutes, {scrollPositionRestoration: 'enabled', useHash: true})]

并且请将代码库中的所有 href 属性更改为 routerLink 指令，如下所示：

<a routerLink="/portfolio" class="btn btn-lg edit_hover_class custom-btn">
                    <fa-icon [icon]="faBriefcase"></fa-icon> My portfolio 
                   </a>

【讨论】：

谢谢 LXhelili，useHash:tur 和 routerLink 一起解决了我的问题。

【解决方案2】：

我假设您说的是 index.html 后备，它在生产中不起作用，就像它在开发时在本地起作用一样。

您可以通过查看https://angular.io/guide/deployment#routed-apps-must-fallback-to-indexhtml 此处的文档来解决您的问题。

只要知道你的在线服务器是什么，并针对它制定解决方案。

【讨论】：