Routing between Modules in Angular

hackerbuddy picture hackerbuddy · Nov 4, 2018 · Viewed 10.9k times · Source

I'm building simple angular application. There are two modules as student and teacher. Here is how my project organized.

Project structure

First when user enter to the application i let him to choose whether he is an teacher or student.

Depending on what he user will be redirected in to the corresponding module.

import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import { StudentModule } from './student/student.module';
import { TeacherModule } from './teacher/teacher.module';
import { HomeComponent } from './home/home.component';


const routes: Routes = [
    {
        path: '',
        component: HomeComponent
    },
    {
        path: 'student',
        loadChildren: () => StudentModule
    },
    {
        path: 'teacher',
        loadChildren: () => TeacherModule
    }
];

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


  } 

Here is my app.routing.ts file.

My problem us when i redirected into the module i want to route between component in those module. Should i add another <router-outlet> into each modules or can i do that with the only <router-outlet> in AppModule.

If i should add another <router-outlet> how should i write my router class for those modules.

Answer

Amr Ibrahim picture Amr Ibrahim · Nov 4, 2018

Lazy loading way Angular v8, v9 and Up

https://angular.io/guide/lazy-loading-ngmodules

// In app module route
{
 path: 'your-path',
 loadChildren: () => import('./path-to/your.module').then(m => m.YourModule)
}

// in your module
const yourRoutes: Routes = [
  { path: '',  component: YourComponent }
];

export const yourRouting = RouterModule.forChild(yourRoutes);

@NgModule({
  imports: [
   yourRouting
  ],
  declarations: [
    YourComponent
  ]
})
export class YourModule{
}

Lazy loading way Angular v7, v6 and down

// In app module route
{
 path: 'your-path',
 loadChildren: 'app/your.module#YourModule'
}

// in your module
const yourRoutes: Routes = [
  { path: '',  component: YourComponent }
];

export const yourRouting = RouterModule.forChild(yourRoutes);

@NgModule({
  imports: [
   yourRouting
  ],
  declarations: [
    YourComponent
  ]
})
export class YourModule{
}

Not lazy loading way

Just import the YourModule in the main module and it will work if the routes are not lazily loaded.

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    YourModule,
    routing
  ],
  declarations: [
    AppComponent
  ],
  providers: [
    appRoutingProviders
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}

Take some time to read rout documentation https://angular.io/guide/router

Check this answer https://stackoverflow.com/a/39284277/6786941