[Angular-Apollo-Tailwind] Add 404 page

angular-apollo-tailwind/src/app/app-routing.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { RouteConfigModule } from '@this-dot/route-config';
+import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';
 
 const routes: Routes = [
   {
@@ -12,6 +13,11 @@ const routes: Routes = [
     path: 'redirect',
     redirectTo: 'signin/redirect',
   },
+  {
+    path: '404',
+    pathMatch: 'full',
+    component: PageNotFoundComponent,
+  },
   {
     path: '',
     loadChildren: () => import('./home/home.module').then((m) => m.HomeModule),

angular-apollo-tailwind/src/app/app.module.ts

@@ -8,9 +8,10 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { GraphQLModule } from './gql/graphql.module';
 import { TokenInterceptor } from './auth/token.interceptor';
+import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';
 
 @NgModule({
-  declarations: [AppComponent],
+  declarations: [AppComponent, PageNotFoundComponent],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,

angular-apollo-tailwind/src/app/components/page-not-found/page-not-found.component.html

@@ -0,0 +1,46 @@
+<!-- <div class="flex items-center justify-center w-screen h-screen" style="height: 100vh">
+  <div class="px-4 lg:py-12">
+    <div class="lg:gap-4 lg:flex">
+      <div
+        class="flex flex-col items-center justify-center md:py-24 lg:py-32"
+      >
+        <h1 class="font-bold text-blue-600 text-[128px]">404</h1>
+        <p
+          class="mb-2 text-2xl font-bold text-center text-gray-800 md:text-3xl"
+        >
+          <span class="text-red-500">Oops!</span> Page not found
+        </p>
+        <p class="mb-8 text-center text-gray-500 md:text-lg">
+          The page you’re looking for doesn’t exist.
+        </p>
+        <a
+          routerLink="/"
+          class="px-6 py-2 text-sm font-semibold text-blue-800 bg-blue-100"
+          >Go home</a
+        >
+      </div>
+    </div>
+  </div>
+</div> -->
+
+<section class="flex items-center h-screen py-16" style="height: 100vh">
+  <div
+    class="container flex flex-col items-center justify-center px-5 mx-auto my-8"
+  >
+    <div class="max-w-md text-center">
+      <h2 class="mb-4 font-extrabold text-9xl">
+        <span class="sr-only">Error</span>404
+      </h2>
+      <p class="text-2xl font-semibold md:text-3xl mb-8">
+        Sorry, we couldn't find this page.
+      </p>
+      <a
+        rel="noopener noreferrer"
+        routerLink="/"
+        class="px-8 py-3 font-semibold rounded bg-gray-900"
+      >
+        <span class="text-white">Back to homepage</span>
+      </a>
+    </div>
+  </div>
+</section>

angular-apollo-tailwind/src/app/components/page-not-found/page-not-found.component.spec.ts

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

angular-apollo-tailwind/src/app/components/page-not-found/page-not-found.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-page-not-found',
+  templateUrl: './page-not-found.component.html',
+  styleUrls: ['./page-not-found.component.css'],
+})
+export class PageNotFoundComponent {}

angular-apollo-tailwind/src/app/components/toaster/toaster.service.ts

@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
 import { Observable, Subject } from 'rxjs';
 import { ToastEvent } from './toaster.model';
 
@@ -9,11 +10,15 @@ export class ToasterService {
   toastEvents: Observable<ToastEvent>;
   private _toastEvents = new Subject<ToastEvent>();
 
-  constructor() {
+  constructor(private router: Router) {
     this.toastEvents = this._toastEvents.asObservable();
   }
 
   showToast(toast: ToastEvent) {
     this._toastEvents.next(toast);
   }
+
+  goTo404(err: any) {
+    this.router.navigate(['/404']);
+  }
 }

angular-apollo-tailwind/src/app/gql/graphql.module.ts

@@ -16,15 +16,17 @@ export function createApollo(
 ): ApolloClientOptions<any> {
   const http = httpLink.create({ uri });
   const error = onError(({ networkError, graphQLErrors }) => {
-    if (graphQLErrors)
+    if (graphQLErrors) {
       graphQLErrors.map(({ message, locations, path }) => {
         toasterService.showToast({
           type: ToasterType.ERROR,
           title: 'GraphQL error',
-          message: `Message: ${message}, 
+          message: `Message: ${message},
           Location: ${locations}, Path: ${path}`,
         });
       });
+      toasterService.goTo404(graphQLErrors);
+    }
 
     if (networkError) {
       toasterService.showToast({

angular-apollo-tailwind/src/environments/environment.ts

@@ -12,9 +12,9 @@
 
 export const environment = {
   production: false,
-  apiUrl: 'https://api.starter.dev',
+  apiUrl: '',
   graphApiUrl: 'https://api.github.com/graphql',
-  redirectUrl: 'http://localhost:4200/redirect',
+  redirectUrl: 'https://localhost:4200/redirect',
 };
 
 /*

angular-apollo-tailwind/tailwind.config.js

@@ -12,6 +12,21 @@ module.exports = {
         30: '30ms',
       },
     },
+    fontSize: {
+      'xs': '.75rem',
+      'sm': '.875rem',
+      'base': '1rem',
+      'lg': '1.125rem',
+      'xl': '1.25rem',
+      '2xl': '1.5rem',
+      '3xl': '1.875rem',
+      '4xl': '2.25rem',
+      '5xl': '3rem',
+      '6xl': '4rem',
+      '7xl': '4.5rem',
+      '8xl': '6rem',
+      '9xl': '8rem'
+    }
   },
   variants: {
     extend: {},