Angular Routing : routes always redirect to 404 page

Question

I tried to create a 404 page on my Web Application, so I create the component and add the routes to the app-rouging.module.ts but the website is always redirected to the 404 page even if I enter "/home" in the URL.

The not-found component is in the public module, attached to a not-found module :

import { NgModule } from '@angular/core';
import { SharedModule } from 'src/app/shared/shared.module';
import { NotFoundComponent } from './not-found/not-found.component';

@NgModule({
  declarations: [NotFoundComponent],
  imports: [
    SharedModule
  ]
})
export class NotFoundModule { }

public.module.ts :

import { NgModule } from '@angular/core';
import { PublicRoutingModule } from './public-routing.module';
import { SharedModule } from '../shared/shared.module';
import { MainPageComponent } from './main-page/main-page.component';
import { CookieInformationComponent } from './cookie-information/cookie-information.component';
import { LegaleInformationComponent } from './legale-information/legale-information.component';
import { MapComponent } from './map/map.component';
import { AgmCoreModule } from '@agm/core';
import { InnerHTMLComponent } from './inner-html/inner-html.component';
import { NotFoundModule } from './not-found/not-found.module';

@NgModule({
  declarations: [MainPageComponent, CookieInformationComponent, LegaleInformationComponent, MapComponent, InnerHTMLComponent],
  imports: [
    SharedModule,
    PublicRoutingModule,
    AgmCoreModule,
    NotFoundModule
  ]
})
export class PublicModule { }

I have 3 files for routing : app-routing, private-routing and public-routing :

app-routing.module.ts :

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { NotFoundComponent } from './public/not-found/not-found/not-found.component';

const APP_ROUTES: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: '**', component: NotFoundComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(APP_ROUTES)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

public-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MainPageComponent } from '../public/main-page/main-page.component'
import { LegaleInformationComponent } from './legale-information/legale-information.component';
import { CookieInformationComponent } from './cookie-information/cookie-information.component';

const APP_ROUTES_PUBLIC: Routes = [
  { path: 'home', component: MainPageComponent },
  { path: 'legal', component: LegaleInformationComponent },
  { path: 'cookie', component: CookieInformationComponent }
];

@NgModule({
  imports: [RouterModule.forChild(APP_ROUTES_PUBLIC)],
  exports: [RouterModule]
})
export class PublicRoutingModule { }

private-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AdminComponent } from './admin/admin/admin.component';
import { UploadFileComponent } from './admin/upload-file/upload-file.component';
import { QRCreateComponent } from './admin/qr-code-management/create/create.component';
import { QRUpdateComponent } from './admin/qr-code-management/update/update.component';

const APP_ROUTES_PRIVATE: Routes = [
  { path: 'admin', component: AdminComponent },
  { path: 'admin/upload-file', component: UploadFileComponent },
  { path: 'admin/qr-code-management/create', component: QRCreateComponent },
  { path: 'admin/qr-code-management/update', component: QRUpdateComponent }
];

@NgModule({
  imports: [RouterModule.forChild(APP_ROUTES_PRIVATE)],
  exports: [RouterModule]
})
export class PrivateRoutingModule {

Marek Szkudelski Marek Szkudelski · Accepted Answer · 2020-09-02T10:28:37

Look at your app routing module declaration:

const APP_ROUTES: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: '**', component: NotFoundComponent }
];

If someone goes to, for example 'http://localhost:3000/', you redirect him to 'http://localhost:3000/home'. But you don't have route declaration for 'home' path, so router will display NotFoundComponent.

You need to add declaration for 'home' path. For example:

const APP_ROUTES: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', 
    loadChildren: () => import('./public.module').then(m => m.PublicModule) },
  { path: '**', component: NotFoundComponent }
];

Note 1: you need to have route with path: '' in PublicModule to make it work. Probably you have to change path 'home' to simple empty path.

Note 2: I'm assuming you want to lazy load your modules. You can read more about it: https://angular.io/guide/lazy-loading-ngmodules

Angular Routing : routes always redirect to 404 page

1 Answers