Angular 6 when redirected to home, page redirects but doesn't load

Question

I am new to angular, I have a very big project that i just converted from html/css/php/js to twig/slim the project was using apache2/sql but now I am going to host the project on s3 buckets/lambda apis .

I have created and converted a couple of basic projects already over to angular without a problem but now I am converting these larger projects, so I needed to split up the project a lot using modules. Hence the weirdly routed (I am not sure if this is best way but I have been updating it a lot).

But with this larger project when I get redirected from an invalid url, I get redirected to the index redirect of localhost:4200 but the page doesn't load and I get an error:

Start of error -->

core.js:1624 ERROR Error: Uncaught (in promise): TypeError: undefined is not a function TypeError: undefined is not a function at Array.map (<anonymous>) at webpackAsyncContext ($_lazy_route_resource lazy namespace object:32) at

End of error -->

defaultErrorLogger @ core.js:1624

The error seems to change a bit as code but it's similar with TypeError: undefined is not a function

Now my question is:

1. Why is this error occurring and how do I fix it?

2. If I can't fix it is there a way I can get the page to reload after the initial load on the redirect

Any help would be very much appreciated, Cheers!

(Here's my code also!)

app.module.ts

import { NgModule }     from '@angular/core'; // <-- Import module object
import { AppComponent } from './app.component'; // <-- Main entry point/view
import { RouterModule } from '@angular/router'; // <-- Routing for root
import { routes }       from './app.routes'; // <-- Main router
// | External modules |
import { BrowserModule } from '@angular/platform-browser'; // <-- TODO: Look into what this is for
// | Internal modules |
import { AdminModule }  from './modules/admin/admin.module';
import { HeroesModule } from './modules/heros/heroes.module';
import { HomeModule }   from './modules/home/home.module';
import { TodoModule }   from './modules/todo/todo.module';

// | Provider services |
import { UserService } from './user.service';
import { Logger }      from './logger.service';

@NgModule({
  declarations: [ AppComponent ], // <-- Main entry point
  imports: [
    RouterModule.forRoot(routes), // <-- Main router
    BrowserModule, // <-- TODO: Look into what this is for
    AdminModule, HeroesModule, HomeModule, TodoModule // <-- Internal modules
  ],
  providers: [ Logger, UserService ],
  bootstrap: [ AppComponent ],
})
export class AppModule { } // <-- Export module class

app.routes.ts

import { Routes } from '@angular/router'; // <-- Import routing
// This redirects all routing to module routers.
export const routes: Routes = [
  { path: '', loadChildren: './modules/admin/admin.module#AdminModule' },
  { path: '', loadChildren: './modules/heros/heroes.module#HeroesModule' },
  { path: '', loadChildren: './modules/home/home.module#HomeModule' },
  { path: '', loadChildren: './modules/todo/todo.module#TodoModule' },
]
// This redirects all routing to module routers.

home.module.ts

import { NgModule }     from '@angular/core'; // <-- Import module object
import { CommonModule } from '@angular/common'; // <-- Declaring this module will be used often
import { RouterModule, Routes } from '@angular/router';

// | Internal components |
import { HomeComponent } from './home.component'; // <-- Main entry point

const childRoutes: Routes = [
    { path: '', component: HomeComponent } // <-- Main entry point
];

@NgModule({
  declarations: [
    HomeComponent, // <-- Main entry point
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(childRoutes),
  ],
  providers: []
})
export class HomeModule { } // <-- Export module class

The components are the basic generated components with <h1>It works</h1>

Answer 1

 const routes: Routes = [

  {
   path: '',
   redirectTo: '/home',
   pathMatch: 'full'

   },


   {
   path: '',
   component: HomeModule,
   children: [
     {
        path: 'admin',
        loadChildren: './admin/admin.module#AdminModule'
     },
      {
        path: 'hero',
        loadChildren: './heros.module#HeroesModule'
       },
     ]      
   }
 ];

Design your app.routes.ts file in this way, I think it may work for you. And you will be good to go.

Answer 2

//Put this path at the end in routes
       {
         path: '**',
         redirectTo: '/home'
       }

Design your app.routes.ts file like @Lakmipriya asked, and to solve your problem =>

The path '**' stands for all invalid paths, so if user reoutes to an invalid path, this piece of code will be hit and he will be rerouted to /home