重新加载http:// localhost:4200 / home时出现404错误

时间:2019-05-30 10:47:40

标签: angular angular7

我已经看到许多与此相关的问题,但是没有一个问题帮助我解决了这个问题。

我已将路由创建为app-routing.module.ts

const routes: Routes = [  
 { path: 'home', component: LandingpageComponent, canActivate: [AuthGuard] },
 { path: '', redirectTo: '/home', pathMatch: 'full' },
 { path: 'trade-order', component: TradeOrderComponent},
 { path: '**', component: NotFoundComponent },
];


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

我已经创建了整个项目,并使用

进行了构建
ng build --prod

创建上面的代码dist文件夹,然后在IIS上托管此文件夹

当我尝试使用www.test.com进行访问时,它会自动重定向到www.test.com/home,作为我在途中设置为主页的默认页面,但是当我尝试重新加载相同的URL时,它会显示404错误。

>

所以我用.htaccess创建了文件名,并以

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

但这对我没有用。 我需要用其他名称替换{REQUEST_FILENAME}还是在IIS上进行一些更改?

我是否需要将.htaccess代码替换为其他一些代码。

您可以将我的问题与herehere关联起来

我知道我会在此上得到负面评价,但对我来说,我真的无法理解在不同帖子上写的答案。

更新1

根据Nanotage的建议,我创建了web.config,编写的代码为

<configuration>
<system.webServer>
 <rewrite>
<rules>
  <rule name="Redirect all requests" 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="/home" />
    <!--<action type="Rewrite" url="/" />-->
    </rule>
</rules>
  </rewrite>
 </system.webServer>
</configuration>

图片为Folder Pic

1 个答案:

答案 0 :(得分:1)

一个.htaccess文件是apache Web服务器使用的文件。在IIS上,它是由web.config文件处理的。

我在IIS服务器上托管了一个角度应用程序,我们使用了这个web.config文件

<configuration>
<system.webServer>
  <rewrite>
    <rules>
      <rule name="Redirect all requests" 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="/HelloWorld/" />
        <!--<action type="Rewrite" url="/" />-->
        </rule>
    </rules>
  </rewrite>
</system.webServer>
</configuration>

(从Hosting an Angular Web application in IIS server被无耻地偷走了)

请记住,您也可以将此文件作为资产添加到angular.json文件中,并且在构建时会自动包含在dist目录中。