Angular 2 is not redirecting to 404 page when route param and address are invalid

Question

I am developing an application using Angular 4.1.1. I've always declared routing in a module and I do it in all modules.

For example, 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 { }

I declared this route in app-routing.module.ts for incorrect routes:

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

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

export class AppRoutingModule {}

And it handles properly wrong addresses, if I write the following addresses in a such format:

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

However, the following addresses are wrong and they are just redirected to home page, but I would like to show 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*/

What I've tried:

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

and:

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

However, invalid urls are just redirected to home page. Please, pay attention, that I'm using module routing to route in modules and application routing to redirect to 404 page.

My app.module.ts file:

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

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

My web.config of ASP.NET Core Web Application looks like this:

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

The error page does not occur even I intentionally return 404 error:

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

What should I write to redirect to 404 page?

path: '**' should not have component: '404', it should redirectTo: '404' — Yeysides, May 17 '17 at 15:46
Are you importing your routes const exported in app-routing.module.ts into your main app module? — Yeysides, May 17 '17 at 17:12
In your app.routing.module.ts you need to import the RouterModule and do .forRoot(routes), then export RouterModule which will be imported by app.module.ts. You can do .forChild in your separate components but I don't see those 404 routes being imported anywhere from what you are showing. — Yeysides, May 18 '17 at 16:24
Yeah that looks correct. I'm going to try to replicate your issue in a bit. Will get back to you soon. — Yeysides, May 18 '17 at 17:35
Ok so apparently this could have to do with your web server setup. What web server are you using and do you have a redirect configured to route to your app 404 route? — Yeysides, May 18 '17 at 20:45
You'll need to configure it to redirect to either your index.html or /404 on a 404 error. — Yeysides, May 19 '17 at 16:49
http://stackoverflow.com/questions/6016933/configuring-custom-asp-404-page-with-redirect-for-iis7-website — Yeysides, May 19 '17 at 16:56
I'm using a tomcat server and this is what I needed to do, you need to capture the 404 error from the server and show your own. Just give it a try and see if that works. — Yeysides, May 19 '17 at 16:58

score 0 · Answer 1 · answered May 17 '17 at 17:44

0

Try this :

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

answered May 17 '17 at 17:44

Angular 2 is not redirecting to 404 page when route param and address are invalid

1 Answers1