Question

我创建新项目 ng new apps

并建立生产 ng build --prod

在途中

import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
const routes: Routes = [
    {path:'', component:HomeComponent},
    {path:'about', component:AboutComponent},
];

但是，当我使用xampp服务器托管在localhost中时，清除chace并刷新页面错误异常404

未找到

在此服务器上找不到请求的URL / office / about。

Answer 1

我们有两种在IIS上部署角度应用程序的方法是使用Hashing Strategies，另一个使用web.config。

使用Hashing Strategies，您将在网址中获得＃。但是，如果用户使用refersh the page or press F5按钮，它不会破坏url或显示404错误。

例如在主模块中，使用useHash:true。

@NgModule({
    imports: [RouterModule.forRoot(routes,{useHash:true})],
    exports: [RouterModule]
})

第二种方式，不使用Hashing Strategies。但是我们也需要在IIS级别和代码级别进行配置。

步骤1：在IIS级别上，您需要检查是否允许url重写功能。如果不是，则需要下载rewrite_2.0_rtw_x86.exe or rewrite_2.0_rtw_x64.exe用于86或64位操作系统。然后以管理员级别运行。

步骤2：：创建一个web.config文件，然后复制并粘贴以下代码。

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
  <rewrite>
    <rules>
      <rule name="Angular 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="/index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>
</configuration>

第3步。复制web.config文件并将其粘贴到根级托管的应用程序中。

Answer 2

在已编译项目的文件夹中添加 .htaccess 文件。

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]

RewriteRule ^(.*) /index.html [NC,L]

当找不到时清除404

2 个答案: