Routing between Modules in Angular

Question

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

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 1

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

Answer 2

Yes, you need to define routing for individual modules and in the module component file you need to provide

Below should be the file structure

- Teacher 
   -teacher.component.html  --> here you should put <router-outlet>
   -techer-routing.module.ts --> here you need to define routes for teacher module
   -teacher.module.ts --> import techer-routing.module here
   -Logincomponent
        -login.component.html
        -login.component.ts
   -Homecomponent
        -home.component.html
        -home.component.ts

Same as another module for students.

Next step is to specify teacher module internal routes. below are the probable content of

teacher-routing.module.ts

Below are the sample routes for teacher module

 const routes: Routes = [
    {path: '', component: TeacherComponent, children: [
    {path: '', component: TeacherComponent,data: {title: "Teachers"}},
    {path: 'Home',  component:HomeComponent, data: {title: "Home"}},
    {path: 'Register',  component:RegisterComponent, data: {title: 
      "Register"}},
     ]
   }
 ]

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

export class TeacherRoutingModule{}