网站上的Angular项目刷新结果404页面答案

【问题标题】：Angular project refresh result 404 page on the site网站上的Angular项目刷新结果404页面
【发布时间】：2020-07-06 20:38:26
【问题描述】：

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

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

ng build

然后我将 dist 文件上传到服务器。然后，网址就可以了。

www.miexchange.tech

如果我点击任何按钮转到其他页面，它运行良好。

但如果我点击刷新按钮或F5 则无法获取当前页面。

enter image description here

请看图，现在效果很好。但是如果我点击刷新按钮，就会显示这个页面。

enter image description here

请告诉我原因。

【问题讨论】：

code-sample.com/2018/05/angular-5-6-7-hashlocationstrategy.html 阅读教程 HashLocationStrategy 问题。 useHash:true

标签： angular deployment angular-ui-router

【解决方案1】：

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

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

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

【讨论】：

【解决方案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 {}

【讨论】：

太棒了。为了在 Angular 应用程序中启用 HashLocationStrategy，我们在向 RouterModule 提供路由时传递 {useHash: true}