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

Question

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

这里有一个 link 的源代码：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 { }

我很乐意尝试任何建议，提前致谢！

Answer 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>

Answer 2

我假设您是在谈论 index.html 回退，它在生产中不起作用，就像在开发中在本地工作一样。

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

只需知道您的在线服务器是什么，然后针对它制定解决方案。

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

Angular 12 sub routes 404 loosing context on refresh

routes

node.js

angular-ui-router

angular