Angular 5 Modules and Routing

Question

I am aware how routes can be configured to load components as shown below:

//app.module.ts
const appRoutes: Routes = [
    {path: '', component: HomeComponent},
    {path: 'login', component: LoginComponent},
}

I was just wondering if we can associate a route to point to a module that contains sub-routes to a set of components. Something like a module named Dashboard that performs certain checks before loading components associated with it. Something like:

Homepage
Login
Dashboard
- Index
- Articles

And do:

//dashboard.module.ts
const appRoutes: Routes = [
    {path: 'dashboard', component: DashboardIndexComponent},
    {path: 'dashboard/articles', component: DashboardArticleComponent},
}

I am interested in knowing how or if my understanding of the concept is incorrect, what would be the recommended approach?

Thank you.

Yes, you can build what's called a feature module and add the routes for that feature to that module. In your example, it would be a "Dashboard" feature module. You can then optionally lazy load that module. For more information and an example, see this: angular.io/guide/feature-modules — DeborahK
– DeborahK, Commented Mar 6, 2018 at 6:54
@DeborahK Hi. Thanks for the suggestion. Would you you care to demonstrate how by posting an answer? I am only an hour to my deadline and would really appreciate a working example. — Jhourlad Estrella
– Jhourlad Estrella, Commented Mar 6, 2018 at 6:56
Did you look at the router documentation from the Angular team? angular.io/guide/router The Angular docs like this one and that @DeborahK provided have tons of examples. — Daniel W Strimpel
– Daniel W Strimpel, Commented Mar 6, 2018 at 6:58

DeborahK · Accepted Answer · 2018-03-06 06:58:14Z

Yes, you can build what's called a feature module and add the routes for that feature to that module. In your example, it would be a "Dashboard" feature module. You can then optionally lazy load that module. For more information and an example, see this: angular.io/guide/feature-modules

I have a more complete example here: https://github.com/DeborahK/MovieHunter-routing

In my example, the "movie" is the feature module.

Here is the code for the movie module as an example:

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

import { SharedModule } from '../shared/shared.module';
import { ReactiveFormsModule } from '@angular/forms';

import { MovieListComponent } from './movie-list.component';
import { MovieDetailComponent } from './movie-detail.component';
import { MovieEditComponent } from './edit/movie-edit.component';
import { MovieEditInfoComponent } from './edit/movie-edit-info.component';
import { MovieEditTagsComponent } from './edit/movie-edit-tags.component';

import { MovieService } from './movie.service';
import { MovieParameterService } from './movie-parameter.service';
import { MovieResolver } from './movie-resolver.service';
import { MovieEditGuard } from './edit/movie-edit-guard.service';
import { MovieSearchComponent } from './search/movie-search.component';
import { MovieEditReactiveComponent } from './edit/movie-edit-reactive.component';

export const movieRoutes: Routes = [
  { path: '', component: MovieListComponent },
  { path: 'search', component: MovieSearchComponent },
  {
    path: ':id',
    resolve: { movie: MovieResolver },
    component: MovieDetailComponent
  },
  {
    path: ':id/editReactive',
    resolve: { movie: MovieResolver },
    component: MovieEditReactiveComponent
  },
  {
    path: ':id/edit',
    resolve: { movie: MovieResolver },
    canDeactivate: [ MovieEditGuard ],
    component: MovieEditComponent,
    children: [
      { path: '', redirectTo: 'info', pathMatch: 'full' },
      { path: 'info', component: MovieEditInfoComponent },
      { path: 'tags', component: MovieEditTagsComponent }
    ]
  }
];

@NgModule({
  imports: [
    SharedModule,
    ReactiveFormsModule,
    RouterModule // For lazy loading, use this instead: RouterModule.forChild(movieRoutes)
  ],
  declarations: [
    MovieListComponent,
    MovieDetailComponent,
    MovieEditComponent,
    MovieEditInfoComponent,
    MovieEditTagsComponent,
    MovieEditReactiveComponent,
    MovieSearchComponent
  ],
  providers: [
    MovieService,
    MovieParameterService,
    MovieResolver,
    MovieEditGuard
  ]
})
export class MovieModule { }

Thanks. In case I need to do initial processing, say Auth checking before loading it's components, would ngOnInit() inside DashboardModule recommended?

Collectives™ on Stack Overflow

Angular 5 Modules and Routing

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related