Why are my routes not loading the right child?

Question

I'm currently studying Angular (CLI v7.1.0) and I'm a little bit confused with routing/modules. I'm building a test application where I want public and admin components in different modules. This is what my application looks like:

(All URLs are just for explanatory purposes)

The public module should be visible to anyone who accesses http://mywebsite.com, the admin module should be accessed through http://mywebsite.com/admin. Each module has a component called WrapperComponent (which I need to wrap shared components like headers, navbars, etc...) and it'll navigate through all pages in the admin module, making router-outlet needed in it's HTML file.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AdminModule } from './modules/admin/admin.module';
import { PublicModule } from './modules/public/public.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AdminModule,
    PublicModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: 'public',
    loadChildren: './modules/public/public.module#PublicModule'
  },
  {
    path: 'admin',
    loadChildren: './modules/admin/admin.module#AdminModule'
  },
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

public.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PublicRoutingModule } from './public-routing.module';
import { WrapperComponent } from './wrapper/wrapper.component';
import { HomeComponent } from './pages/home/home.component';

@NgModule({
  declarations: [HomeComponent, WrapperComponent],
  imports: [CommonModule, PublicRoutingModule]
})
export class PublicModule { }

public-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { WrapperComponent } from './wrapper/wrapper.component';
import { HomeComponent } from './pages/home/home.component';

const routes: Routes = [
  {
    path: '',
    component: WrapperComponent
  }
];

@NgModule({
  declarations: [],
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class PublicRoutingModule { }

admin.module.ts and admin-routing.module.ts look pretty much the same as the public module. I won't add it here to not extend the question but it's available at GitHub.

The problem

I've tried to make path: '', redirectTo: '/public' in the app-routing.module.ts but it doesn't redirect to the public module. When I removed this route from my array both wrappers (public and admin) loaded. I need to do as I explained above but I'm a little bit lost. I've been reading some other questions here and the Angular docs for lazy loading + Angular docs for Routing & Navigation.

Thanks in advance~

Answer 1

Basically the problem is that you need to use lazy loading (that's the easier way, but if you dont want to use lazy loading its also possible) - and that's this loadChildren property in the routing module.

So the app-routing.module.ts should look like this (check the correct paths).

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'public',
    pathMatch: 'full'
  },
  {
    path: 'public',
    loadChildren: './modules/public/public.module#PublicModule'
  },
  {
    path: 'admin',
    loadChildren: './modules/admin/admin.module#AdminModule'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

And also remove the PublicModule and AdminModule from the imports in the app.module.ts

There is simple understandable example of lazy loading modules.