Angular 9 children route module not loading

Question

I'm creating an application with Angular 9 where I've created a separate routing module for the admin purpose and calling it in app.module to initialize. But for some reason the routes are not getting called and and the below error is coming in the console.

ERROR Error Angular 11 resolvePromise resolvePromise scheduleResolveOrReject invokeTask onInvokeTask invokeTask runTask drainMicroTaskQueue invokeTask invoke timer core.js:3872

I've created child modules like this in previous versions of Angular and it worked perfectly. You can check my github repository if you want to https://github.com/tridibc2/sample-angular. Have a look at my modules below

AdminModule:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AdminComponent } from '../admin/admin.component';
import { SignupComponent } from '../signup/signup.component';
import { LoginComponent } from '../login/login.component';
import { ManageBlogsComponent } from '../manage-blogs/manage-blogs.component';

const routes: Routes = [
  { path: 'signup', component: SignupComponent },
  { path: 'login', component: LoginComponent },
    { path: 'admin', component: AdminComponent },
   { path: 'admin/blog', component: ManageBlogsComponent }
];

@NgModule({
  declarations: [
    AdminComponent,
    SignupComponent,
    LoginComponent,
    ManageBlogsComponent
  ],
  imports: [
    RouterModule.forChild(routes),
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ],
  exports: [RouterModule]
})
export class AdminModule { }

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { RouterModule } from '@angular/router';
import { ClientModule } from './client/client-routing/client.module';
import { AdminModule } from './admin/admin-routing/admin.module';
import { AppRoutingModule } from './app.routing';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent ],
  imports: [
    BrowserModule,
    CommonModule,
    NgbModule,
    ClientModule,
    AdminModule,
    AppRoutingModule,
    FormsModule,
    RouterModule ],

   bootstrap: [AppComponent]
})
export class AppModule { }

app.routing.ts:

import { NgModule } from '@angular/core';
import { CommonModule, } from '@angular/common';
import { BrowserModule  } from '@angular/platform-browser';
import { Routes, RouterModule } from '@angular/router';
import { BlogHomeComponent } from './client/blog-home/blog-home.component';
const routes: Routes =[
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    { path: 'home',             component: BlogHomeComponent }
];

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

khizer khizer · Accepted Answer · 2020-04-13T23:09:28

Simple example for routing of eager loaded module. Ref of atleast one component is required in parent module and which is mostly a component that has router-outlet tag to render child module routes.

...

const routes: Routes = [
  { 
    path: '', 
    component: CompWhichHasRouterOutletTag,
    children:[
      {path: '', redirectTo: 'signup', pathMatch: 'full'},
      { path: 'signup', component: SignupComponent },
      { path: 'login', component: LoginComponent },
      { path: 'admin', component: AdminComponent },
      { path: 'admin/blog', component: ManageBlogsComponent }]
    }

];

@NgModule({
  declarations: [
    CompWhichHasRouterOutletTag,
    AdminComponent,
    SignupComponent,
    LoginComponent,
    ManageBlogsComponent
  ],
  imports: [
    RouterModule.forChild(routes),
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ],
  exports: [RouterModule, CompWhichHasRouterOutletTag]
})
export class AdminModule { }

app.routing.ts file

const routes: Routes = [
  { path: '', redirectTo: '/home/', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'contact', component: ContactComponent },
  { path: 'admin-route', component: CompWhichHasRouterOutletTag },
]
@NgModule({
  imports: [
    ...

    RouterModule.forRoot(routes),

    ...
  ]
})

Angular 9 children route module not loading

1 Answers