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

我在我的应用中修改了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="./">。刷新页面现在没问题。

Answer 2

此功能适用于角度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 3

如果您使用的是角度6,7，则此方法有效（如果您可以在URL中使用/＃/，则可以。

在app.module.ts

中

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

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

{provide: LocationStrategy, useClass: HashLocationStrategy}

例如：

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

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

Answer 4

我最初的解决方法是将404重定向回root，到目前为止，我还没有看到不利的一面。令我惊讶的是，刷新时请求路径和参数都将保留。这是在带有Angular 9且仅使用Chrome（内部应用程序）的IIS 10环境中，因此我可能没有意识到其他因素在起作用，这只是使这种情况看起来可持续。如果我们发现了一些东西，会尽量记住回到我的答案。

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <httpErrors>
            <remove statusCode="404" subStatusCode="-1" />
            <error statusCode="404" prefixLanguageFilePath="" path="/" responseMode="ExecuteURL" />
        </httpErrors>
    </system.webServer>
</configuration>

Answer 5

这对我有用：

将 web.config 添加到 /src

 <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>

在 angular.json 上，在资产添加上

"src/web.config"

Answer 6

这将适用于以下服务器。

Apache 服务器

将根目录下的 .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 服务器

更改服务器文件

Instead of using: try_files $uri $uri/ =404;

try using: 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;
             }
    }

角度部署 - 页面刷新404

6 个答案: