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

Question

我有一个问题。我已经编写了代码并在本地服务器中启动它。 一切都运行良好，但当我将其推送到 Azure 时，它​​就坏了。

问题:当我去链接时它工作正常，但是当我重新加载时它给出错误 404。

另外，当我写这个时，一切正常，但我不喜欢我的网址中的 #

{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="/" />

你可以自己尝试一下。前往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

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

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

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