Could you please help me resolve an issue where my Angular application redirects to a blank white screen after logging in?

When I attempt to implement lazy loading on my website as a beginner, I encounter an issue where after logging in, the login page redirects me to a blank white screen. How can I resolve this issue?

app-routing.moudle.ts

 const routes: Routes = [
  {
    path: '',
    component: WebsiteLayoutComponent,
    children: [
      {
        path: '',
        component: HomePageComponent // Home page component for website
      },
      {
        path: 'subcategory/:categoryId',
        component: SubcategoryPageComponent
      },
      {
        path: 'products',
        component: ProductPageComponent // Route for displaying search results
      },
      {
        path: 'product/:categoryId',
        component: ProductPageComponent
      },
      {
        path: 'product/:categoryId/:subcategoryId', // Route for products with subcategories
        component: ProductPageComponent
      },
      // Add other website routes here
    ]
  },
  { path: 'login', component: LoginComponent },
  { path: 'swiper', component: SwiperComponent }, // Define a login route
  { 
    path: 'admin',
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
    canActivate: [AuthGuard]
  },
  { path: '**', redirectTo: '' }
];


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

admin-routing-module.ts :

const adminRoutes: Routes = [
  {
    path: 'admin',
    component: AdminLayoutComponent,
    canActivate: [AuthGuard],
    children: [
      { path: '', redirectTo: 'brand-list', pathMatch: 'full' },
      { path: 'brand-list', component: BrandListComponent },
      { path: 'category-list/:brandId', component: CategoryListComponent },
      { path: 'add-category', component: AddCategoryComponent },
      { path: 'edit-category/:id', component: EditCategoryDialogComponent },
      { path: 'edit-subcategory/:id', component: EditSubcategoryDialogComponent },
      { path: 'subcategory-list', component: SubcategoryListComponent },
      { path: 'bycategory/:id', component: SubcategoryListComponent },
      { path: 'products/:subcategoryId', component: ProductListComponent },
      { path: 'product/:id', component: ProductPageComponent },
      { path: '**', redirectTo: 'brand-list' }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(adminRoutes)],
  exports: [RouterModule]
})
export class AdminRoutingModule {}

Login.component.ts :

export class LoginComponent {
  username: string = '';
  password: string = '';
  errorMessage: string = '';

  constructor(private authService: AuthService, private router: Router) {}

  async login(): Promise<void> {
    if (!this.username || !this.password) {
      this.showErrorMessage("Username and password are required.");
      return;
    }

    try {
      const loggedIn = await this.authService.login(this.username, this.password);
      if (loggedIn) {
        this.router.navigate(['/admin']);
      } else {
        this.showErrorMessage("Incorrect username or password.");
      }
    } catch (error) {
      console.error("Error during login:", error);
      this.showErrorMessage("An error occurred during login.");
    }
  }

  showErrorMessage(message: string): void {
    this.errorMessage = message;
  }
}

after a successfull login i want login page to route me to /admin

>Solution :

Right now you don’t have /admin route in your app, but /admin/admin because of nesting. You should fix admin-routing-module.ts.

Instead of

const adminRoutes: Routes = [
  {
    path: 'admin',
    ...
  }
];

it should be just

const adminRoutes: Routes = [
  {
    path: '',
    ...
  }
];