gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 01:04:57 25 4
gpt4 key购买 nike

我有一个问题。我已经编写了代码并在本地服务器中启动它。 一切都运行良好,但当我将其推送到 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"
]
}

最佳答案

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

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

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

关于angular - 重新加载页面时出现 HTTP 错误 404,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51301066/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com