Angular 2 - 404 page not displaying

Question

I have set up a "404 - page not found" page for when the user enters a url that dooesn't match any paths in my web app:

export const routerConfig: Routes = [
   {
      component: LandingPageComponent,
      path: "",
   },
   {
      component: ProfilePageComponent,
      path: "profile",
   },
   {
      component: NotFoundPageComponent,
      path: "**",
   },
];

However when I type in my app address and then an incorrect path (eg http://localhost:3000/prcds) it just displays :

Cannot GET /prcds

In a blank web page with an error in the console:

Failed to load resource: the server responded with a status of 404 (Not Found)

I have added NotFoundPageModule into app.module imports.

I used the "configuration" section from https://angular.io/docs/ts/latest/guide/router.html and copied how they did it into my project to set up the 404 not found page.

How do I get it to stop displaying that error and display my actual page that I made for 404 errors?

It displays the same page from my other question so there is a small chance, that it is related to this issue:

My Code:

not found page file structure:

notfoundpage.component.ts

import { Component } from "@angular/core";
import { Title } from "@angular/platform-browser";

@Component({
   selector: "not-found-page",
   styleUrls: ["dist/app/components/not-found-page/not-found-page.component.css"],
   templateUrl: "dist/app/components/not-found-page/not-found-page.component.html",
})
export class NotFoundPageComponent {
   constructor(private titleService: Title) {
      this.titleService.setTitle("Not Found");
   }
}

notfoundpage.module.ts

import { CommonModule } from "@angular/common";
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import * as NotFoundPage from "./index";

@NgModule({
   declarations: [
      NotFoundPage.NotFoundPageComponent,
   ],
   exports: [NotFoundPage.NotFoundPageComponent],
   imports: [CommonModule, FormsModule],
})
export class NotFoundPageModule { }

app.module.ts

// tslint:disable-next-line:no-reference
/// <reference path="../../../node_modules/moment/moment.d.ts" />

// Angular 2 modules
import { Component, NgModule } from "@angular/core";
import {
   ControlValueAccessor,
   FormBuilder,
   FormGroup,
   FormsModule,
   ReactiveFormsModule,
   Validators,
} from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { RouterModule } from "@angular/router";
import { AgmCoreModule } from "angular2-google-maps/core";
import { routerConfig } from "../app.routes";

// Plugin modules
import { Ng2Bs3ModalModule } from "ng2-bs3-modal/ng2-bs3-modal";

// App modules
import { AboutPageModule } from "../components/about-page/about-page.module";
import { AddPageModule } from "../components/add-page/add-page.module";
import { FindPageModule } from "../components/find-page/find-page.module";
import { LandingPageModule } from "../components/landing-page/landing-page.module";
import { NotFoundPageModule } from "../components/not-found-page/not-found-page.module";
import { ProfilePageModule } from "../components/profile-page/profile-page.module";
import { RegisterPageModule } from "../components/register-page/register-page.module";
import { SharedModule } from "../components/shared/shared.module";
import { AppComponent } from "./app.component";

@NgModule({
   bootstrap: [AppComponent],
   declarations: [
      AppComponent,
   ],
   imports: [
      BrowserModule,
      RouterModule.forRoot(routerConfig),
      FormsModule,
      Ng2Bs3ModalModule,
      AgmCoreModule,
      ReactiveFormsModule,
      LandingPageModule,
      FindPageModule,
      AddPageModule,
      AboutPageModule,
      RegisterPageModule,
      ProfilePageModule,
      NotFoundPageModule,
      SharedModule,
   ],
   providers: [
      FormBuilder,
   ],
})
export class AppModule { }

whole app.routes.ts:

import { Routes } from "@angular/router";
import { AboutPageComponent } from "./components/about-page/about-page.component";
import { AddPageComponent } from "./components/add-page/add-page.component";
import { FindPageComponent } from "./components/find-page/find-page.component";
import { LandingPageComponent } from "./components/landing-page/landing-page.component";
import { NotFoundPageComponent } from "./components/not-found-page/not-found-page.component";
import { ProfilePageComponent } from "./components/profile-page/profile-page.component";
import { RegisterPageComponent } from "./components/register-page/register-page.component";

export const routerConfig: Routes = [
   {
      component: LandingPageComponent,
      path: "",
   },
   {
      path: "",
      pathMatch: "full",
      redirectTo: "",
   },
   {
      component: FindPageComponent,
      path: "find",
   },
   {
      component: AddPageComponent,
      path: "add",
   },
   {
      component: RegisterPageComponent,
      path: "register",
   },
   {
      component: AboutPageComponent,
      path: "about",
   },
   {
      component: ProfilePageComponent,
      path: "profile",
   },
   {
      path: "**",
      pathMatch: "full",
      redirectTo: "NotFoundPageComponent",
   },
   {
      component: ProfilePageComponent,
      path: "**",
   },
];

Replace `NotFoundPageComponent` with `ProfilePageComponent` and check if you type an incorrect path, it will redirect you into profile page then. — kind user, Jan 01 '17 at 23:23
@K.Daniek It doesn't redirect to the profile page. Still just says cannot get — BeniaminoBaggins, Jan 01 '17 at 23:27
Give me whole code from your routing file with all imports, etc. — kind user, Jan 01 '17 at 23:29
Could you change `templateUrl: "dist/app/components/not-found-page/not-found-page.component.html",` to `templateUrl: "./not-found-page.component.html",` and I do not get it why it is `dist` not `src` ? — SeleM, Jan 01 '17 at 23:37
here is simple article to fix this issue https://blog.almightytricks.com/2020/10/14/how-to-fix-404-page-not-found-error-after-build-in-angular-or-react-or-vue-js/ — Sangram Badi, Oct 15 '20 at 10:55

score 3 · Accepted Answer · edited Nov 20 '17 at 14:07

Replace your app.routes.ts file with following code:

import { Routes, RouterModule } from "@angular/router";
import { AboutPageComponent } from "./components/about-page/about-page.component";
import { AddPageComponent } from "./components/add-page/add-page.component";
import { FindPageComponent } from "./components/find-page/find-page.component";
import { LandingPageComponent } from "./components/landing-page/landing-page.component";
import { NotFoundPageComponent } from "./components/not-found-page/not-found-page.component";
import { ProfilePageComponent } from "./components/profile-page/profile-page.component";
import { RegisterPageComponent } from "./components/register-page/register-page.component";

const routerConfig: Routes = [
   {
      component: LandingPageComponent,
      path: "",
   },
   {
      component: FindPageComponent,
      path: "find",
   },
   {
      component: AddPageComponent,
      path: "add",
   },
   {
      component: RegisterPageComponent,
      path: "register",
   },
   {
      component: AboutPageComponent,
      path: "about",
   },
   {
      component: ProfilePageComponent,
      path: "profile",
   },
   {
      component: NotFoundPageComponent,
      path: "404",
   },
   {
      path: "**",
      redirectTo: '404' 
   }
];

export const routerConfig = RouterModule.forRoot(routerConfig);

If it still doesn't work, you should consider using `angular-cli`. — kind user, Jan 01 '17 at 23:48
Your code has quite a few errors so im fixing them but changing the code quite a bit — BeniaminoBaggins, Jan 01 '17 at 23:54
Errors? You mean the last line? It comes from `angular-cli`. If it doesn't fit your code, just delete it and replace `const routerConfig: Routes = ...` with `export const routerConfig: Routes = ...` like it was before. But it's kinda strange that it routes to the `register` instead of `404`. — kind user, Jan 02 '17 at 00:04

user6801750 · Answer 2 · 2017-01-01T23:36:58.470

You need to give pathMatch: 'full', like below:

        export const routerConfig: Routes = [
           {
              component: LandingPageComponent,
              path: "",
           },
           {
              component: ProfilePageComponent,
              path: "profile",
           },
            { path: '', redirectTo: 'NotFoundPageComponent', pathMatch: 'full' },
           {
              component: NotFoundPageComponent,
              path: "**",
           },
        ];

In your "notfoundpage.module.ts", try below:

Replace this:

       import * as NotFoundPage from "./index";

With this:

        import {NotFoundPageComponent } from './not-found-page.component';

And replace this:

     declarations: [
          NotFoundPage.NotFoundPageComponent,
       ],
       exports: [NotFoundPage.NotFoundPageComponent]

With this:

         declarations: [
              NotFoundPageComponent,
           ],
           exports: [NotFoundPageComponent]

Angular 2 - 404 page not displaying

2 Answers2