网站上的角度项目刷新结果404页面

Question

在我的本地计算机上，角度项目运行良好。

所以我通过FTP将其部署到服务器。

ng build

然后我将dist文件上传到服务器。然后，该URL有效。

www.miexchange.tech

如果我单击任意按钮转到其他页面，则效果很好。

但是，如果我单击刷新按钮或F5，则无法获得当前页面。

enter image description here

请看图片，现在效果很好。但是，如果单击刷新按钮，则会显示此页面。

enter image description here

请让我知道原因。

Answer 1

dist/index.html中的基本href是什么？尝试将其更改为

  <base href="/your/deployment/directory/on/the/server">

有关更多信息，您可以阅读https://angular.io/guide/deployment#the-base-tag

Answer 2

谢谢Bansi29，您是对的

此问题归因于哈希。

有两种方法。

1）将{useHash: true}插入到app-routing.module.ts

app-routing.module.ts
@NgModule({
    imports: [RouterModule.forRoot(routes), { useHash: true }],
    exports: [RouterModule],
    providers: [
        TableDataService,
        RegularTablesResolver,
    ],
    entryComponents: [
        ModalComponent,
    ]
})

2）有时useHash true发生这样的错误

TS2322: Type '{ useHash: boolean; }' is not assignable

在这种情况下，您可以执行以下步骤。

app.module.ts
import { HashLocationStrategy, LocationStrategy } from '@angular/common';

之后，请在{provide: LocationStrategy, useClass: HashLocationStrategy}处插入@NgModule providers。

例如

import { NgModule }       from '@angular/core';
import { BrowserModule  } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
import { HashLocationStrategy, LocationStrategy } from '@angular/common';
@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule],
    providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],
    bootstrap: [AppComponent],
})
export class AppModule {}