CODEWITHSUNDEEP
angularlazy-loadingangular-router
Enrique GF
Enrique GF

Reputation: 1295

setting lazy load on Angular not working properly

Hello Developers I'm trying to implement the logic of lazy load in my app , but for some reason it doesn't work.

I got 2 pages previously created , with its module and route module specifically , and the third page would be the one with administrative roles over these former two, handling their routes , and imported to app module. For the first to componentes (tab1 and tab2) I set this logic:

FIRST SETTING ITS ROUTING MODULE

import { Tab1Component } from './tab1.component';
import { RouterModule, Routes } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

const routes: Routes = [
  {
    path: '',
    component: Tab1Component/Tab2Component,
  },
];

@NgModule({
  declarations: [],
  imports: [CommonModule, RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class Tab1RoutingModule/Tab2RoutingModule {}

Then is established their modules for each folder(tab1 and tab2)

SECOND SETTING THE MODULE FILE FOR EACH COMPONENT

import { Tab1RoutingModule } from '../tab1/tab1-routing.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Tab1Component } from './tab1.component';

@NgModule({
  declarations: [Tab1Component],
  imports: [
    CommonModule,
    ReactiveFormsModule,
    FormsModule,
    Tab1RoutingModule/Tab2RoutingModule
  ],
  exports:[Tab1Component]
})
export class Tab1Module/Tab2Module {}

The in the third component that would be the administrative one i set through a loadchildren the charge of the module representatives of this former two components as follows

THIRD ADMINSTRATIVE PAGE SETTING ALL CHILDREN ROUTES

import { NgModule } from '@angular/core';
import { MenuAdminComponent } from './menu-admin.component';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'tabs',
    component: MenuAdminComponent,
    children: [
      {
        path: 'tab1',
        loadChildren: () =>
          import('../../pages/tab1/tab1.module').then((m) => m.Tab1Module),
      },
      {
        path: 'tab2',
        loadChildren: () =>
          import('../../pages/tab2/tab2.module').then((m) => m.Tab2Module),
      },
    ],
  },
  {
    path: '**',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full',
  },
];

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

And its module importing the former two modules of the other component in it would be established in this way:

import { MenuAdminRoutingModule } from '../menu-admin/menu-admin-routing.module';
import { MenuAdminComponent } from '../menu-admin/menu-admin.component';

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { Tab2Module } from '../tab2/tab2.module';
import { Tab1Module } from '../tab1/tab1.module';

import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';

@NgModule({
  declarations: [MenuAdminComponent],
  imports: [
    CommonModule,
    ReactiveFormsModule,
    FormsModule,
    Tab2Module,
    Tab1Module,
    MenuAdminRoutingModule,

    MatToolbarModule,
    MatIconModule,
  ],
  exports: [MenuAdminComponent],
})
export class MenuAdminModule {}

Then on my app module routing i would just call that administrative page :

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

const routes: Routes = [

      {
        path: '',
        loadChildren: () =>
          import('./pages/menu-admin/menu-admin.module').then((m) => m.MenuAdminModule),
      },

];

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

And the app module would bring the former component modules imported

import { MenuAdminModule } from './pages/menu-admin/menu-admin.module';
import { ComponentsModule } from './components/components.module';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { Tab1Module } from './pages/tab1/tab1.module';
import { Tab2Module } from './pages/tab2/tab2.module';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
   
    ComponentsModule,
    MenuAdminModule,
    Tab1Module,
    Tab2Module

  ],


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

But for some reason when I set either the routes to tab1 or to tab2 the router set me on the administrative page ('menu-admin-works'). Here https://stackblitz.com/github/enriquefgf86/bookmark-material I set the problem. Any help would be amazing. Really Thanks!!!

Upvotes: 0

Views: 1048

Answers (1)

Aakash Garg
Aakash Garg

Reputation: 10971

The problem was with your route structure and components:-

I changed the menu route config to :-

import { NgModule } from '@angular/core';
import { MenuAdminComponent } from './menu-admin.component';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { MenuHomeComponent } from './menu-home/menu-home.component';

const routes: Routes = [
  {
    path: 'tabs',
    component: MenuAdminComponent,
    children: [
      {
        path: '',
        component: MenuHomeComponent
      },
      {
        path: 'tab1',
        loadChildren: () =>
          import('../../pages/tab1/tab1.module').then((m) => m.Tab1Module),
      },
      {
        path: 'tab2',
        loadChildren: () =>
          import('../../pages/tab2/tab2.module').then((m) => m.Tab2Module),
      },
    ],
  },
  // {
  //   path: '**',
  //   redirectTo: '/tabs/tab1',
  //   pathMatch: 'full',
  // },
];

@NgModule({
  declarations: [],
  // imports: [
  //   RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  // ],
  exports: [RouterModule],
  imports: [RouterModule.forChild(routes)],
})
export class MenuAdminRoutingModule { }

where menu home component is a new component.

I shifted the template of menu admin component to menuhomecomponent.

I added a router-outlet to menu admin component.

Thats called nested router outlet, you can read more here :- https://medium.com/dev-genius/the-art-of-nested-router-outlets-in-angular-dafb38245a30

Working stackblitz :- https://stackblitz.com/edit/github-g1cauu?file=src/app/pages/menu-admin/menu-admin-routing.module.ts

Upvotes: 1

Related Questions