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.
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
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{}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.