在Angular 4中刷新页面时出现404错误 [英] Getting 404 error on page refresh in Angular 4

问题描述

我们已经使用'ng build --prod'cli命令部署了angular 4应用程序并创建了IIS 8.5上托管的'dist'文件夹，当我们运行该应用程序时它运行正常，但是如果按F5键则会出现404错误./p>

注意:如果建议，请勿建议使用(useHash:true)，否则我们将如何从网址中删除#".

如果有人可以建议我们，请提供帮助.

解决方案

您可以编写更改web.config文件的方法，如下所示

<configuration>
    <system.webServer>
         <rewrite>
            <rules>
              <rule name="AngularJS Routes" 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="/" />
              </rule>
            </rules>
          </rewrite>
          <caching enabled="true" enableKernelCache="true">
              <profiles>
                  <add extension=".js" policy="DisableCache" kernelCachePolicy="DisableCache" />
              </profiles>
          </caching>
    </system.webServer>
</configuration>

让我解释一下这种配置

<match url=".*" />

此匹配所有即将到来的网址，然后使用操作将其重定向到您的基本路径中

<action type="Rewrite" url="/" />

如果您将项目设置在子文件夹中，而不是更改 url ="/subfolder/" .

We have deployed angular 4 application using 'ng build --prod' cli command and created 'dist' folder hosted on IIS 8.5, when we run the application then it's working fine but if pressed F5 key then getting 404 error.

Note: please don't suggest to use (useHash:true) if suggested then how we can remove '#' from url.

Appreciated help if some one can suggest us.

解决方案

You can write change your web.config file like below

<configuration>
    <system.webServer>
         <rewrite>
            <rules>
              <rule name="AngularJS Routes" 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="/" />
              </rule>
            </rules>
          </rewrite>
          <caching enabled="true" enableKernelCache="true">
              <profiles>
                  <add extension=".js" policy="DisableCache" kernelCachePolicy="DisableCache" />
              </profiles>
          </caching>
    </system.webServer>
</configuration>

let's i explain more this configuration

<match url=".*" />

this match all url which is coming and than it's redirect in your base path using action

<action type="Rewrite" url="/" />

If you have set your project in subfolder than change your url="/subfolder/".

这篇关于在Angular 4中刷新页面时出现404错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！