added 404 not found to routing page for invalid URLs

src/app/app-routing.module.ts

+import { NotFoundComponent } from './not-found/not-found.component';
 import { SpainComponent } from './spain/spain.component';
 import { GreeceComponent } from './greece/greece.component';
 import { AccountComponent } from './account/account.component';
@@ -15,7 +16,8 @@ const routes: Routes = [
   {path:'account', component: AccountComponent},
   {path:'greece', component: GreeceComponent},
   {path:'spain', component: SpainComponent},
-  {path: 'contact-us', component: ContactUsComponent}
+  {path: 'contact-us', component: ContactUsComponent},
+  {path: '**', component: NotFoundComponent}
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -14,6 +14,7 @@ import { AccountComponent } from './account/account.component';
 import {FormsModule} from '@angular/forms';
 import {ReactiveFormsModule} from '@angular/forms';
 import { ContactUsComponent } from './contact-us/contact-us.component';
+import { NotFoundComponent } from './not-found/not-found.component';
 
 @NgModule({
   declarations: [
@@ -25,7 +26,8 @@ import { ContactUsComponent } from './contact-us/contact-us.component';
     GreeceComponent,
     SpainComponent,
     AccountComponent,
-    ContactUsComponent
+    ContactUsComponent,
+    NotFoundComponent
   ],
   imports: [
     BrowserModule,

src/app/contact-us/contact-us.component.html

-<p>contact-us works!</p>
-
 <div>
     <div style="display:inline-block">
     <form [formGroup]="userForm" (ngSubmit)="onSubmit()">
         <div>
-            <p>reactive</p>
+            <p>Contact Us Form</p>
             <div>
                 <input type="text" formControlName="firstName"  class="form-control input" placeholder="First name">
             </div>

src/app/england/england.component.html

-<p>england works!</p>
 
 <div class='imgContainer' >
     <img  class='img' src='/assets/images/england/england-bridge.jpg' />

src/app/france/france.component.html

-<p>france works!</p>
-
 <div >
     <div class="row" style="padding: 20px;">
         <div class="col-sm-10">

src/app/greece/greece.component.html

-<p>greece works!</p>
-
 <div class='imgContainer' >
     <img  class='img' src='/assets/images/greece/greece-beach.jpg' />
     <img  class='img' src='/assets/images/greece/greece-steps.jpg' />

src/app/not-found/not-found.component.html

+<h1>404 NOT FOUND</h1>
+<h2>URL is invalid.</h2>
\ No newline at end of file

src/app/not-found/not-found.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NotFoundComponent } from './not-found.component';
+
+describe('NotFoundComponent', () => {
+  let component: NotFoundComponent;
+  let fixture: ComponentFixture<NotFoundComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ NotFoundComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NotFoundComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/not-found/not-found.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-not-found',
+  templateUrl: './not-found.component.html',
+  styleUrls: ['./not-found.component.css']
+})
+export class NotFoundComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/spain/spain.component.html

-<p>spain works!</p>
-
 <div class='imgContainer' >
     <img  class='img' src='/assets/images/spain/spain-barcelona.jpg' />
     <img  class='img' src='/assets/images/spain/spain-cathedral.jpg' />