Angular 2 – Module and Route Structures

WRITTEN BY GARETH DUNNE @JSDIARIES

In simple terms, modules are the basic building blocks of our Angular 2 application, whereas routes provide us with paths to point to specific parts of our application. These are both core to an Angular 2 application. It is important to create both with good, clean separation of concerns in mind.

A standard application has different layers of components (or functionality) that the user can navigate to. This is where our routes come into play. These routes provide url paths to direct us to these different parts of the apps functionality.

Say we are creating an application that displays a list whiskeys. When the user clicks on a whiskey in the list, we want to display a page showing the detailed information about that whiskey. That’s just one piece of the application.

How about the user wants to search for a whiskey he has previously purchased? That’s another piece of similar functionality. Because these components are closely associated with each other in terms of purpose,  it makes sense to create relevant routes in the same folder.

As a project of reference, I will be referring to my Whiskey shop application for example of the structure of its project directory. I hope to fully publish this within the next few weeks.

So for a basic application, we can just declare all these routes in our app.module.ts file (Our entry point for the application) . But what about more expansive applications with many different components to be directed to? We can then create a routing TypeScript file specific to a folder of similar components. This creates a routing system that is compartmentalized rather than declared in the one place.

For instance, say we have an actions folder containing a login, register and profile component. We can then create an  actions.routing.ts file which contains the relevant route paths.

From here, we can export this routing file and include it in our App modules component.

For more detailed information on the Angular 2 router check it out here.

https://angular.io/docs/ts/latest/guide/router.html

A module provides meta data for a particular section of your application. It is then exported and can be accessed by another component by importing it. This imports/exports system is made possible through TypeScript syntax.

The process of importing classes/components into other classes and components closely resembles something from Object Oriented languages Java, C# etc.

 import { ActionsRoutingModule } from './actions.routing'; 

./ in an angular import means current directory. This is obviously something you’d be aware of while making an Angular 2 application but its nice to be reminded due to the amount of time you can waste trying to get the correct directory path.
By declaring similar components in the same module you get to have a cleaner components and separated logic. You can declare all imports that are relevant to those modules.

  

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AlertModule } from 'ng2-bootstrap/ng2-bootstrap';
import { AppComponent } from './app.component';
import { HeaderComponent } from './layout/header/header.component';
import { LayoutModule } from './layout/layout.module';
import { FooterComponent } from './layout/footer/footer.component';
import { WhiskeysModule } from './whiskeys/whiskeys.module';
import { ActionsModule } from './actions/actions.module';
import { AppRoutingModule } from './app.routing';

import { LoginModalComponent } from './login-modal/login-modal.component';
import { RouterModule } from '@angular/router';
import { NotFoundComponent } from './not-found/not-found.component';



@NgModule({
  declarations: [
    AppComponent,
    NotFoundComponent,
    LoginModalComponent,
    
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    HttpModule,
    AlertModule,
    WhiskeysModule,
    ActionsModule,
    LayoutModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

So as you can see we have consolidated some of our modules into groups. Our LayoutModule and ActionsModule contains more than one referenced component.

For example our LayoutModule contains all of the following modules from our layout folder. Just to note the layout folder is just name I gave the folder in this instance and is not an Angular 2 specific structure recommendation.

The components from this layout folder (FooterComponent, HeaderComponent, NavigationComponent) were declared and exported here:

  
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { FooterComponent } from './footer/footer.component';
import { HeaderComponent } from './header/header.component';
import { NavigationComponent } from './navigation/navigation.component';


@NgModule({
    imports: [BrowserModule, FormsModule ],
    declarations: [NavigationComponent, HeaderComponent, FooterComponent]
})

export class LayoutModule { };

This enables our app.module.ts file to be significantly cleaner because we don’t have to declare each individual component that we have in our application.

Another advantage of these components segmented by similar functionality  is the ability to remove one from declarations if the developer wants to stop the use of certain piece of that particular functionality.

So just to reiterate we should assort all our module providers routes in RouterModule Object specific to that group.

We also no longer have to declare our routes here as we have our routes declared in our specific group components.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { LoginComponent } from './login/login.component';
import { ProfileComponent } from './profile/profile.component';
import { RegisterComponent } from './register/register.component';
import { ActionsRoutingModule } from './actions.routing';

@NgModule({
    imports: [BrowserModule, FormsModule, ActionsRoutingModule],
    declarations: [LoginComponent, RegisterComponent, ProfileComponent ]
})

export class ActionsModule { }

It is also regarded as good practice to separate your routes specific to what folders they are grouped in.

This allows you to have an Angular 2 application’s app.module file to not be overloaded with path references linking to different areas of your application. Instead, these routes will be located in a location thats relevant to the components it links to.

Our application is now nearly completely compartmentalized through the grouping of our modules and routes. Different types of functionality can now be targeted and contained within these groups.

I highly recommend this YouTube Angular Series by Lyrad Digital. The series provides some very useful information step by step, with the early videos in the series covering the best practices of routes and multiple modules.
https://www.youtube.com/watch?v=33ADKstmXqQ&t=2351s