I know that it is no Angular forum, however, I am stuck and may be somebody has knowledge of ASP.NET Core and Angular as it seems interrelated things.
I am developing an application using ASP.NET Core Web Application and 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 do to redirect to 404 page? Thanks in advance.