重新加载页面时出现 HTTP 错误 404

Question

我有问题。我编写代码并在我的本地服务器上启动它。一切都很好，但是当我将它推送到 Azure 时它就坏了。

问题：当我转到 link 时它工作正常，但是当我重新加载时它给我错误 404。

此外，当我写这篇文章时，一切正常，但我不喜欢 URL

中的#

{provide: LocationStrategy, useClass: HashLocationStrategy}

这个不行

{provide: LocationStrategy, useClass: PathLocationStrategy}

app.module.ts

// NG Core
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { RouterModule, Routes } from '@angular/router'; 
import { AppRouterRoutingModule } from './app-router/app-router-routing.module';
import {  
  PlatformLocation,  
  Location,  
  LocationStrategy,  
  HashLocationStrategy,  
  PathLocationStrategy,  
  APP_BASE_HREF
} from '@angular/common'; 


// Components
import { AppComponent } from './app.component';
import { HeroComponent } from './components/hero/hero.component';
import { ListblogComponent } from './components/listblog/listblog.component';
import { BlognavbarComponent } from './components/blognavbar/blognavbar.component';
import { SoloblogComponent } from './components/soloblog/soloblog.component';
import { MdToHtmlPipe } from './services/pipe/md-to-html.pipe';


// Dependencys
import { InlineSVGModule } from 'ng-inline-svg';
import { SwiperModule } from 'angular2-useful-swiper';
import { Ng2PageScrollModule } from 'ng2-page-scroll';
import { LazyLoadImageModule } from 'ng-lazyload-image';


@NgModule({
  declarations: [
    AppComponent,
    HeroComponent,
    ListblogComponent,
    BlognavbarComponent,
    SoloblogComponent,
    MdToHtmlPipe,
  ],
  imports: [ 
    NgbModule.forRoot(), 
    RouterModule.forRoot([]),
    AppRouterRoutingModule,
    HttpClientModule,
    BrowserModule,
    BrowserAnimationsModule,
    SwiperModule,
    InlineSVGModule,
    Ng2PageScrollModule,
    LazyLoadImageModule,
  ],
  providers: [ ContentfulService, {provide: LocationStrategy, useClass: PathLocationStrategy} ],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-router-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from '../components/home/home.component';
import { TeamComponent } from '../components/team/team.component';
import { ListblogComponent } from '../components/listblog/listblog.component';
import { SoloblogComponent } from '../components/soloblog/soloblog.component';
import {  
  PlatformLocation,  
  Location,  
  LocationStrategy,  
  HashLocationStrategy,  
  PathLocationStrategy,  
  APP_BASE_HREF
} from '@angular/common'; 


const routes: Routes = [
  {
    path: "",
    component: HomeComponent,
    pathMatch: 'full'
  },
  {
    path: "blog",
    component: ListblogComponent,
    pathMatch: 'full',
  },
  {
    path: "team",
    component: TeamComponent,
    pathMatch: 'full'
  },
  {
    path: "blog/:id",
    component: SoloblogComponent,
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class AppRouterRoutingModule { }

在index.html我有

 <base href="/" />

你可以自己试试。单击 header 中的 "Blog" 按钮后转到 http://beta-rev.azurewebsites.net/。你应该去博客，但如果你重新加载页面你会看到错误。

预先感谢您的帮助！

解决

我已经通过 web.config 进入我的文件夹 src

<configuration>
<system.webServer>
    <staticContent>
    <clientCache cacheControlMaxAge="30.00:00:00" cacheControlMode="UseMaxAge"/>
      <!-- use utf-8 encoding for anything served text/plain or text/html -->
      <!-- in the case of .html files; if you AJAX load html files (i.e. in angular) then remove these two lines. -->
      <remove fileExtension=".html"/>
      <mimeMap fileExtension=".html" mimeType="text/html; charset=UTF-8"/>
      <remove fileExtension=".css"/>
      <mimeMap fileExtension=".css" mimeType="text/css"/>
      <remove fileExtension=".js"/>
      <mimeMap fileExtension=".js" mimeType="text/javascript"/>
      <remove fileExtension=".json"/>
      <mimeMap fileExtension=".json" mimeType="application/json"/>
      <remove fileExtension=".rss"/>
      <mimeMap fileExtension=".rss" mimeType="application/rss+xml; charset=UTF-8"/>
      <remove fileExtension=".xml"/>
      <mimeMap fileExtension=".xml" mimeType="application/xml; charset=UTF-8"/>
      <remove fileExtension=".map"/>
      <mimeMap fileExtension=".map" mimeType="application/json" />
      <!-- HTML5 Audio/Video mime types-->
      <remove fileExtension=".mp3"/>
      <mimeMap fileExtension=".mp3" mimeType="audio/mpeg"/>
      <remove fileExtension=".mp4"/>
      <mimeMap fileExtension=".mp4" mimeType="video/mp4"/>
      <remove fileExtension=".ogg"/>
      <mimeMap fileExtension=".ogg" mimeType="audio/ogg"/>
      <remove fileExtension=".ogv"/>
      <mimeMap fileExtension=".ogv" mimeType="video/ogg"/>
      <remove fileExtension=".webm"/>
      <mimeMap fileExtension=".webm" mimeType="video/webm"/>
      <!-- Proper svg serving. Required for svg webfonts on iPad -->
      <remove fileExtension=".svg"/>
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml"/>
      <remove fileExtension=".svgz"/>
      <mimeMap fileExtension=".svgz" mimeType="image/svg+xml"/>
      <!-- HTML4 Web font mime types -->
      <!-- Remove default IIS mime type for .eot which is application/octet-stream -->
      <remove fileExtension=".eot"/>
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject"/>
      <remove fileExtension=".ttf"/>
      <mimeMap fileExtension=".ttf" mimeType="application/x-font-ttf"/>
      <remove fileExtension=".ttc"/>
      <mimeMap fileExtension=".ttc" mimeType="application/x-font-ttf"/>
      <remove fileExtension=".otf"/>
      <mimeMap fileExtension=".otf" mimeType="font/opentype"/>
      <remove fileExtension=".woff"/>
      <mimeMap fileExtension=".woff" mimeType="application/font-woff"/>
      <remove fileExtension=".woff2"/>
      <mimeMap fileExtension=".woff2" mimeType="font/woff2"/>
      <remove fileExtension=".crx"/>
      <mimeMap fileExtension=".crx" mimeType="application/x-chrome-extension"/>
      <remove fileExtension=".xpi"/>
      <mimeMap fileExtension=".xpi" mimeType="application/x-xpinstall"/>
      <remove fileExtension=".safariextz"/>
      <mimeMap fileExtension=".safariextz" mimeType="application/octet-stream"/>
      <!-- Flash Video mime types-->
      <remove fileExtension=".flv"/>
      <mimeMap fileExtension=".flv" mimeType="video/x-flv"/>
      <remove fileExtension=".f4v"/>
      <mimeMap fileExtension=".f4v" mimeType="video/mp4"/>
      <!-- Assorted types -->
      <remove fileExtension=".ico"/>
      <mimeMap fileExtension=".ico" mimeType="image/x-icon"/>
      <remove fileExtension=".webp"/>
      <mimeMap fileExtension=".webp" mimeType="image/webp"/>
      <remove fileExtension=".htc"/>
      <mimeMap fileExtension=".htc" mimeType="text/x-component"/>
      <remove fileExtension=".vcf"/>
      <mimeMap fileExtension=".vcf" mimeType="text/x-vcard"/>
      <remove fileExtension=".torrent"/>
      <mimeMap fileExtension=".torrent" mimeType="application/x-bittorrent"/>
      <remove fileExtension=".cur"/>
      <mimeMap fileExtension=".cur" mimeType="image/x-icon"/>
      <remove fileExtension=".webapp"/>
      <mimeMap fileExtension=".webapp" mimeType="application/x-web-app-manifest+json; charset=UTF-8"/>
    </staticContent>
</system.webServer>
<system.webServer>
    <rewrite>
      <rules>
        <rule name="Main Rule" stopProcessing="true">
                <match url=".*" />
                <conditions logicalGrouping="MatchAll">
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                </conditions>
                <action type="Rewrite" url="./index.html" />
            </rule>
        </rules>
    </rewrite>
</system.webServer>
</configuration>

也变成angular.json

"build": {
          "options": {
            "outputPath": "dist",
            "assets": [
              "src/assets",
              "src/favicon.ico",
              "src/web.config"          
            ]
}

Answer 1

您可能缺少重写规则。这里有一个适合您的示例 web.config：

<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension=".json" mimeType="application/json" />
            <remove fileExtension=".woff"/>
            <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
            <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
     </staticContent>

      <rewrite>
        <rules>
            <rule name="Angular" stopProcessing="true">
                <match url=".*" />
                <conditions logicalGrouping="MatchAll">
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                </conditions>
                <action type="Rewrite" url="/" />
            </rule>
        </rules>
        </rewrite>
    </system.webServer>
</configuration>

另请参阅：Web.config for hosting an Angular application on Azure Web App

Answer 2

Angular有自己的路由机制。要使其正常工作，您需要始终重定向到您的 index.html。请参阅：https://css-tricks.com/redirect-web-page/ 如何操作。我个人使用 .htaccess 文件重定向 url。

Answer 3

如果您在 Azure Web 应用程序中托管 (ubuntu)。请使用以下启动命令。

pm2 serve /home/site/wwwroot/build --no-daemon --spa

使用 --spa 选项 pm2 会自动将所有查询重定向到 index.html，然后 React 路由器会发挥它的魔力。

Answer 4

对于那些可能想知道最简单的解决方案是在您的 Angular - 入口点（通常是 app.componnets.ts/js）

在 NgOnInt 上刷新时重新加载调用 --> this.router.navigate(['']); 其中路由器是来自“@angular/router”的路由器；

重新加载页面时出现 HTTP 错误 404

HTTP ERROR 404 when reload page

blogs

azure

http-status-code-404

web

angular