title: Angular 2 - 404 page not displaying
body: <p>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:</p>
  
  <pre><code>export const routerConfig: Routes = [
     {
        component: LandingPageComponent,
        path: "",
     },
     {
        component: ProfilePageComponent,
        path: "profile",
     },
     {
        component: NotFoundPageComponent,
        path: "**",
     },
  ];
  </code></pre>
  
  <p>However when I type in my app address and then an incorrect path (eg <code>http://localhost:3000/prcds</code>) it just displays :</p>
  
  <pre><code>Cannot GET /prcds
  </code></pre>
  
  <p>In a blank web page with an error in the console:</p>
  
  <blockquote>
    <p>Failed to load resource: the server responded with a status of 404
    (Not Found)</p>
  </blockquote>
  
  <p>I have added <code>NotFoundPageModule</code> into <code>app.module</code> imports.</p>
  
  <p>I used the "configuration" section from <a href="https://angular.io/docs/ts/latest/guide/router.html" rel="nofollow noreferrer">https://angular.io/docs/ts/latest/guide/router.html</a> and copied how they did it into my project to set up the 404 not found page. </p>
  
  <p>How do I get it to stop displaying that error and display my actual page that I made for 404 errors?</p>
  
  <p>It displays the same page from my other question so there is a small chance, that it is related to <a href="https://stackoverflow.com/q/41390426/3935156">this issue</a>: </p>
  
  <p><strong>My Code:</strong></p>
  
  <p>not found page file structure:</p>
  
  <p><a href="https://i.stack.imgur.com/PeKUv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PeKUv.png" alt="enter image description here"></a></p>
  
  <p>notfoundpage.component.ts</p>
  
  <pre><code>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");
     }
  }
  </code></pre>
  
  <p>notfoundpage.module.ts</p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p>app.module.ts</p>
  
  <pre><code>// tslint:disable-next-line:no-reference
  /// &lt;reference path="../../../node_modules/moment/moment.d.ts" /&gt;
  
  // 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 { }
  </code></pre>
  
  <p>whole app.routes.ts:</p>
  
  <pre><code>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: "**",
     },
  ];
  </code></pre>