Router link not working for a component inside a shared module

Question

I have written a module named "Customer" which has several components like login, home and register. Now I have created a shared module which is also having 2 components such as header and footer. Since header and footer are going to be shared by all the components in the customer module I have placed them in the shared module. The shared module is imported to the customer module.

Now there is a router link which points to the component inside customer module. Those router link are not getting interpreted as href. But if I place those header and footer component directly inside the customer module then those router links are getting interpreted.

I have included the code snippets below.

Shared Module file

import { NgModule } from '@angular/core';

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

@NgModule({
  imports: [ ],
  declarations: [ HeaderComponent, FooterComponent ],
  exports: [ HeaderComponent, FooterComponent ]
})

export class SharedModule { }

Customer module file

import { NgModule } from '@angular/core';

import { SharedModule } from './shared/shared.module';
import { CustomerRoutingModule } from './customer-routing.module';

import { CustomerComponent } from './customer.component';
import { CustomerHomeComponent } from './home/home.component';
import { CustomerLoginComponent } from './login/login.component';
import { CustomerRegisterComponent } from './register/register.component';

@NgModule({
  imports: [ SharedModule, CustomerRoutingModule ],
  declarations: [ CustomerComponent, CustomerHomeComponent, CustomerLoginComponent, CustomerRegisterComponent ]
})

export class CustomerModule { }

Header component html

<div class="header-wrapper">
    <nav class="navbar navbar-light bg-faded">
        <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
        <div class="collapse navbar-toggleable-md" id="navbarResponsive">
            <a class="navbar-brand header-logo" routerLink="./">Your space your time</a>
            <ul class="nav navbar-nav header-menu float-lg-right">
                <li class="nav-item header-menu-item">
                    <a class="nav-link header-menu-link" href="#">About</a>
                </li>
                <li class="nav-item header-menu-item">
                    <a class="nav-link header-menu-link" href="#">Services</a>
                </li>
                <li class="nav-item header-menu-item">
                    <a class="nav-link header-menu-link" routerLink="./signin" routerLinkActive="active">Login <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item header-menu-item">
                    <a class="nav-link header-menu-link" routerLink="./signup" routerLinkActive="active">Register</a>
                </li>
            </ul>
        </div>
    </nav>
</div>

Customer routing module

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

import { CustomerComponent } from './customer.component';
import { CustomerHomeComponent } from './home/home.component';
import { CustomerLoginComponent } from './login/login.component';
import { CustomerRegisterComponent } from './register/register.component';

const customerRoutes: Routes = [
  { path: '', redirectTo: 'customer', pathMatch: 'full' },
  { path: 'customer', component: CustomerComponent,
    children: [
      { path: '', redirectTo: 'home', pathMatch: 'full' },
      { path: 'home', component: CustomerHomeComponent },
      { path: 'signin', component: CustomerLoginComponent },
      { path: 'signup', component: CustomerRegisterComponent }
    ]
  }
];

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

Sox

Answer 1

If i understand you correctly, then your mistake is, that you don't import the RouterModule in your SharedModule. So just import the the RouterModule to get the directive "routerLink", then it should work:

@NgModule({
  imports: [RouterModule ],
  declarations: [ HeaderComponent, FooterComponent ],
  exports: [ HeaderComponent, FooterComponent ]
})

Another advice: I think you didn't understand the pattern with SharedModule / CoreModule. Your header and footer components are core components of your application and you will use them only once in your application (i belive).. So they belong into the CoreModule. The SharedModule is for components, which is used in multiple components, for example a social-media Link. You might use it in different components.

But Please read the Angular Style Guide for further informations: https://angular.io/styleguide#!#04-10

Tiberias

Thank you @oeem1011, it worked. i will work on that and change it to core modules. :) – Sox

Btw, this is the directive, that needed to be imported from RouterModule: github.com/angular/angular/blob/master/packages/router/src/… – Homerhomere

Answer 2

I had the same issue and besides the RouterModule import, I had to change from routerLink="path" to [routerLink]="'path'" to make it work.

Lightening

In my case, I had to do this, but when I undid this change it still worked :S – Obmutescence

Answer 3

Import imports: [RouterModule ] in shared module then use like this [routerLink]="'path'"

Ruelu

Answer 4

To get my shared module routerLinks to work in mine I had to add the "forRoot" to the RouterModule and pass in an empty routes array.

@NgModule({
  declarations: [...MENU_FOOTER_COMPONENTS],
  imports: [CommonModule, RouterModule.forRoot(MENU_FOOTER_ROUTES)],
  exports: [...MENU_FOOTER_COMPONENTS]
})

Eadie