当路由参数和地址无效时，Angular 2 不会重定向到 404 页面答案

【问题标题】：Angular 2 is not redirecting to 404 page when route param and address are invalid当路由参数和地址无效时，Angular 2 不会重定向到 404 页面
【发布时间】：2017-10-17 04:00:38
【问题描述】：

我正在使用Angular 4.1.1 开发应用程序。 我总是在一个模块中声明路由并且我在 所有模块中这样做。

例如new-cars.routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { NewCarsComponent} from './new-cars.component';
import { NewCarsResolver } from './new-cars.resolver';    

@NgModule({
    imports: [
        RouterModule.forChild([
            {
                path: 'cars/:id',
                component: NewCarsComponent,
                resolve: {
                    card: NewCarsResolver
                }
            }
        ])
    ],
    exports: [RouterModule]
})

export class NewCarsRoutingModule { }

我在app-routing.module.ts 中声明了这条路线不正确：

export const routes: Routes = [
  { path: '**', component: PageNotFoundComponent }
];

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

export class AppRoutingModule {}

如果我以这种格式编写以下地址，它会正确处理错误的地址：

http://foowebsite/#/sdf /*the address exists*/

但是，以下地址是错误的，它们只是重定向到主页，但我想显示404 page：

http://foowebsite/#/news/-5  /*There is no such route param "-5".Redirecting to home page, but I want to show 404 error*/

http://foowebsite/sdf  /*There is no "sdf" component/module routing. Redirecting to home 
page, but I want to show 404 error*/

我尝试过的：

export const routes: Routes = [  
  { path: '404', component: PageNotFoundComponent },
  { path: '**', component: PageNotFoundComponent }
];

和：

export const routes: Routes = [  
  { path: '404', component: PageNotFoundComponent },
  { path: '**', redirectTo: '/404' }
];

但是，无效的 url 只是被重定向到主页。请注意，我使用模块路由在模块中进行路由，并使用应用程序路由重定向到 404 页面。

我的app.module.ts 文件：

import { AppRoutingModule } from './app-routing.module';

@NgModule({
    imports: [
        ...
        AppRoutingModule        
    ],
    declarations: [
        AppComponent,
        PageNotFoundComponent
        ],
    bootstrap: [AppComponent]
})
export class AppModule { }

我的web.config 的 ASP.NET Core Web 应用程序如下所示：

<system.webServer>
    <httpErrors>
      <remove statusCode="500" subStatusCode="-1" />
      <remove statusCode="404" subStatusCode="-1" />
      <error statusCode="404" prefixLanguageFilePath="" path="/404" 
                                                responseMode="ExecuteURL" />
      <error statusCode="500" prefixLanguageFilePath="" path="/404" 
                                                responseMode="ExecuteURL" />
      <error statusCode="500" subStatusCode="100" path="/404" 
                                                responseMode="ExecuteURL" />
    </httpErrors>
</system.webServer>

即使我故意返回404错误也不会出现错误页面：

[HttpGet("{name}")]
public async Task<IActionResult> Get(string name)
{
    return StatusCode(404);
}

我应该写什么来重定向到 404 页面？

【问题讨论】：

路径：'**' 不应该有组件：'404'，它应该重定向到：'404'
您是否将在 app-routing.module.ts 中导出的路由 const 导入到您的主应用程序模块中？
在你的 app.routing.module.ts 中，你需要导入 RouterModule 并执行 .forRoot(routes)，然后导出 RouterModule，它将由 app.module.ts 导入。您可以在单独的组件中执行 .forChild ，但我没有看到那些 404 路由从您显示的任何地方导入。
是的，看起来是正确的。我将尝试复制您的问题。很快就会回复您。
好的，显然这可能与您的网络服务器设置有关。您使用的是什么网络服务器，您是否配置了重定向以路由到您的应用程序 404 路由？

标签： javascript c# angular typescript asp.net-core

【解决方案1】：

试试这个：

{path: '404', component: PageNotFoundComponent },
{path: '**', redirectTo: '/404'}

【讨论】：