Angular 部署 - 页面刷新 404

Question

我想在 Angular 中将我的应用程序部署到生产服务器，但我遇到了问题。当我只使用 Angular 路由(更改组件，而不是重定向)时，应用程序可以正常工作，但是当我在浏览器中刷新页面时，我得到一个从 IIS 返回的 404 页面(我使用 IIS 作为 Web 服务器)

这是我的 Angular 路由:

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' }
]

Answer 1

这适用于 angular 8，将 .htaccess 添加到您的项目文件中

<IfModule mod_rewrite.c>
<IfModule mod_negotiation.c>
    Options -MultiViews -Indexes
</IfModule>

RewriteEngine On

# Handle Authorization Header
RewriteCond %{HTTP:Authorization} .
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

# Redirect Trailing Slashes If Not A Folder...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} (.+)/$
RewriteRule ^ %1 [L,R=301]

# Handle Front Controller...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [L]