Angular – simple routing

Do you remember our last post about Angular basic structure? Once you have it, we can build on that.

We’re gonna leave the header, the footer and the sidebar for now and concentrate on creating the real business logic inside the home component.

Creating sub-components

For this particular example, I’m gonna create components: landing (as in the landing page), blog, contact, and course-offer. To do this, I need to move to my home component package in the terminal and create components (just like before) with the “ng generate component” command:

ng generate component landing

I’m gonna repeat this process for all of my functional sub-pages. It’s gonna create the packages with 4 files (2x .ts, .css and .html) for each created component.

This is what the file structure should look like once you’re done.

There footer, header and sidebar components are left intact but inside the home component package there are four more packages – each for one subpage/functional component we created (within each sub-package there are the standard four files).

The standard files for the home component are still there.

Changing a component to a module with routing

We need to add two more files into our home package to end up with the following structure:

home/
├── blog/
│   ├── blog.component.ts
│   ├── blog.component.spec.ts
│   ├── blog.component.html
│   └── blog.component.css
├── contact/
│   ├── contact.component.ts
│   ├── contact.component.spec.ts
│   ├── contact.component.html
│   └── contact.component.css
├── course-offer/
│   ├── contact.component.ts
│   ├── contact.component.spec.ts
│   ├── course-offer.component.html
│   └── course-offer.component.css
├── landing/
│   ├── landing.component.ts
│   ├── landing.component.spec.ts
│   ├── landing.component.html
│   └── landing.component.css
├── home.component.ts
├── home.component.spec.ts
├── home.component.html
├── home.component.css
├── home.module.ts          //This make home into a module.
└── home-routing.module.ts //This creates the routing.

Inside the home.module.ts file (which you need to create manually in your IDE, not via the CLI), place the following code:

//home.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home.component';
import { LandingComponent } from './landing/landing.component';
import { BlogComponent } from './blog/blog.component';
import { ContactComponent } from './contact/contact.component';
import { CourseOfferComponent } from './course-offer/course-offer.component';
import { HomeRoutingModule } from './home-routing.module';

@NgModule({
  declarations: [
    HomeComponent,
    LandingComponent,
    BlogComponent,
    ContactComponent,
    CourseOfferComponent
  ],
  imports: [
    CommonModule,
    HomeRoutingModule
  ]
})
export class HomeModule { }

Last but not least (since it’s pretty much the most important!) – the routing itself. This is another file that you need to create manually in the home package.

//home-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { BlogComponent } from './blog/blog.component';
import { ContactComponent } from './contact/contact.component';
import { CourseOfferComponent } from './course-offer/course-offer.component';
import { HomeComponent } from './home.component';
import { LandingComponent } from './landing/landing.component';

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    children: [
      {
        path: 'landing',
        component: LandingComponent
      },
      {
        path: 'blog',
        component: BlogComponent
      },
      {
        path: 'contact',
        component: ContactComponent
      },
      {
        path: 'course-offer',
        component: CourseOfferComponent
      }, 
      {
        path: '**',
        redirectTo: ''
      }
    ]
  }
];

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

And it’s done! Or is it?!?!

Fixing the app component package

Although the home package itself is done, you still need to make some changes to the app package because your home is no longer a component but a module. Bare with me and make the following changes:

• First, the app.module.ts. Instead of declaring a HomeComponent, we now import HomeModule. Note that all the components declared within home module are not here. If you add them twice, you’ll get an error.

//app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FooterComponent } from './footer/footer.component';
import { HeaderComponent } from './header/header.component';
import { HomeModule } from './home/home.module';
import { SidebarComponent } from './sidebar/sidebar.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    SidebarComponent,
    FooterComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HomeModule
    ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

The files app.component.ts and app.component.spec.ts stay the same. However, there is a slight change in the app.component.html, because we need to change the calling to the home component into the calling to the app-routing.

//app.component.html
<app-header></app-header>
<div class="row">
  <div class="column-1">
    <router-outlet></router-outlet>
  </div>
  <div class="column-2">
    <app-sidebar></app-sidebar>
  </div>
</div>
<app-footer></app-footer>

The last one to deal with is the newly created app-routing.module.ts (Do not mix it with the home-routing.module.ts which is in the home package).

//app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./home/home.module').then(module => module.HomeModule)
  },
  {
    path: '**',
    redirectTo: ''
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

And now, we’re really done!

Conclusion

If you followed and it’s all working now, tap yourself on the back because this is a huge deal! This step is critical for your Angular app to work correctly. And it’s really easy to mess something which results with an empty page and extreme annoyance (been there, done that!).

Ps. You can find all the code here.