Main Angular routes

app-routing.module.ts

const routes: Routes = [
  /**
   * When the path is '' it will know to redirect the user to the landing page.
   * This is setting up the default route that the user will always land on at first.
   */
  { path: '', redirectTo: '/landing', pathMatch: 'full' },
  {
    /**
     * Landing will always be the first route we get to in order to bootstrap
     * the virtual pages and make our lives a little easier in so far as routing
     * goes. This will always go to the next main page afterwards.
     */
    path: 'landing',
    loadChildren: () =>
      import('./routes/landing-route/landing-route.module').then(
        (mod) => mod.LandingRouteModule
      ),
  },
  {
    path: '404',
    loadChildren: () =>
      import('./routes/not-found/not-found.module').then(
        (mod) => mod.NotFoundModule
      ),
  },
  {
    /**
     * the ** path at the end of the array always hits any unknown routes for example
     * if we try to go to /notaroute this this will be called and redirct the user to
     * the 404 route.
     *
     * However, if you look at the main route main/:pageID that pageID could be ANY string
     * so if we go to /main/notaroute the Angular router doesn't know that isn't a legit route
     * so we have to know that ourselves from the response we get from the back-end and manually
     * route to the 404 route.
     */
    path: '**',
    redirectTo: '/404',
  },
];