Angular 部署 - 页面刷新 404

Question

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

这是我的角度路由：

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]

Answer 2

如果您使用的是 angular 6,7，则此方法有效（如果您对 URL 中的 /#/ 感到满意。

在 app.module.ts

import {LocationStrategy, HashLocationStrategy} from '@angular/common';

导入后，将以下行添加到提供者。

{provide: LocationStrategy, useClass: HashLocationStrategy}

前任：

providers: [AuthService, 
            AuthGuard, 
            FlxUiDataTable,
            {provide: LocationStrategy, useClass: HashLocationStrategy}]

这将解决您的问题。在此处阅读文档。

Answer 3

这将适用于以下服务器。

阿帕奇服务器

将根目录下的 .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]
</IfModule>

IIS服务器

添加 web.config

<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Imported Rule 1" stopProcessing="true">
          <match url="^(.*)/$" ignoreCase="false" />
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" ignoreCase="false" negate="true" />
          </conditions>
          <action type="Redirect" redirectType="Permanent" url="/{R:1}" />
        </rule>
        <rule name="Imported Rule 2" stopProcessing="true">
          <match url="^" ignoreCase="false" />
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" ignoreCase="false" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsFile" ignoreCase="false" negate="true" />
          </conditions>
          <action type="Rewrite" url="index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

Nginx服务器

对服务器文件进行更改而不是使用：try_files $uri $uri/ =404;

尝试使用：try_files $uri $uri/ /index.html;

        server {
                listen 80;
                listen [::]:80;
        
                root /var/www/example.com/html;
        
            index index.html index.htm index.nginx-debian.html;
        
                server_name example.com www.example.com;
        
                location / {
                    try_files $uri $uri/ /index.html;
                 }
        }

Answer 4

我修改了我的应用程序中的 web.config：

<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="./">. 刷新页面现在可以了。