Angular部署-刷新404页 [英] Angular deployment - 404 on page Refresh

问题描述

我想将Angular中的应用程序部署到生产服务器，但是我遇到了问题.当我仅使用角度路由(更改组件，不重定向)，但在浏览器中刷新页面时，该应用程序完全正常工作，而我从IIS返回了404页面(我将IIS用作Web服务器)

i would like to deploy my app in Angular to production server but I have problems. App works corectly when I use only angular routing (change component, not redirecting) but when I refresh the page in browser, I get a 404 page returned from IIS (I use IIS as the web server)

这是我的角度路由:

const appRoutes: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full', canActivate: [AuthGuard] },
    { path: 'home', component: DashboardComponent, canActivate: [AuthGuard] },
    { path: "profile", component: UserProfileComponent, canActivate: [AuthGuard] },
    { path: '400', component: ErrorComponent },
    { path: '401', component: ErrorComponent },
    { path: '403', component: ErrorComponent },
    { path: '404', component: ErrorComponent },
    { path: '500', component: ErrorComponent },
    { path: '503', component: ErrorComponent },
    { path: '**', redirectTo: '/404' }
]

推荐答案

我在我的应用中修改了web.config:

I modified the web.config in my app:

<configuration>
  <system.webServer>
<rewrite>
    <rules>
        <rule name="redirect all" stopProcessing="true">
            <match url="^(.*)$" ignoreCase="false" />
            <conditions logicalGrouping="MatchAll">
                <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" pattern="" ignoreCase="false" />
            </conditions>
            <action type="Rewrite" url="./" appendQueryString="true" />
        </rule>
    </rules>
</rewrite>
  </system.webServer>
</configuration>

在index.html中是<base href="./">.现在可以刷新页面了.

In index.html is <base href="./">. Refreshing the page is now ok.

这篇关于Angular部署-刷新404页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！