Angular: Should Routing be done in its own module?

Question

From Angular documentation, the routing example has its routing done inside the same module as the one which it is trying to route for (AppModule). Like such:

const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'hero/:id',      component: HeroDetailComponent },
  {
    path: 'heroes',
    component: HeroListComponent,
    data: { title: 'Heroes List' }
  },
  { path: '',
    redirectTo: '/heroes',
    pathMatch: 'full'
  },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
    // other imports here
  ],
  ...
})
export class AppModule { }

However, the style guide for Angular mention the use of a Routing module. Therefor adding a file for AppRoutingModule and importing the module in the AppModule instead of simply having the routing done in the AppModule. And from what I can gather from the various tutorials, guides and such, the AppRoutingModule is to be used.

Yet, I am still confused as to which structure I am supposed to use. I was taught that Modules in software structure are supposed to have as few dependencies as possible so that they can be easily deployed and/or reused. But isn't having a separate module for a routing that is 100% dependent on the other module against that very concept?

The routing from AppRoutingModule won't work with anything beside the AppModule. So why duplicate the imports on every components used by the routing instead of just creating the routes in the AppModule?

Is there a specific structure I should be using for my project (and why) or is it only subject to personal preference on how I want to structure my project?

Answer 1

If u use module system, than you can make some optimization step. In example:

1. Lazy router
2. Separate modules injection

You can check it with network. JS update after loading new module.

This is nice for AOT-compilation, you can have a fastest load without any dependency.

If you need shared modules, you can create module and import and export modules how Bootstrap, modal-window and other modules, when use in all application.

Pure component is bad style code, because you can't separated you project into another project and have big monolyte project with big dependency system linked .

You can saw modulated system on my home project - https://github.com/Adventure-RPG/Adventure-Client/tree/master/src

Answer 2

It can be done either way, all it comes down to is preference. For maintainability and a growing application, its easier to have them separated.

Creating an app.routing file to define the routes keeps all routing neat and tidy. For example i have an app with an app.routing file, which is then imported into the app.module file. Any new components or routes are simply added to the app.routing file and this file has a simple single purpose.

app.routing

import {RouterModule, Routes} from '@angular/router';
import {LoginPage} from './pages/login.page';
import {AnotherPageComponent} from './pages/anotherPage.component';
import {DashboardPageComponent} from './pages/dashboard.page';
...

// Define the routes for this application
export const appRoutes: Routes = [
  {path: 'dashboard', component: DashboardPageComponent},
  {path: 'another', component: AnotherPageComponent}
  {path: '**', component: LoginPage}
];
export const appRoutingProviders: any[] = [];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes, {useHash: true});

then in your app.module, simply import your appRoutingProviders, and routing constants.

app.module

import {appRoutingProviders, routing} from './app.routing';

imports: [
  routing,
  ...],
providers: [
  appRoutingProviders,
  ..]

Again, this is completely up to you how to structure the app, but thinking ahead you want this to be as simple to maintain as possible. Best approach - go with what you understand, as generally that makes things easier.

Larger applications might break routing down further into sub modules which can be lazy-loaded but that's another story.

tl;dr - Its up to you as there is no Yes or No answer.