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 { }

score 76 · Accepted Answer · answered Dec 04 '16 at 12:12

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

Thank you @oeem1011, it worked. i will work on that and change it to core modules. :) — Senthil Kumar, Dec 04 '16 at 12:27
Btw, this is the directive, that needed to be imported from RouterModule: https://github.com/angular/angular/blob/master/packages/router/src/directives/router_link.ts — KarolDepka, Jun 08 '17 at 23:27

score 10 · Answer 2 · answered Jul 26 '18 at 12:35

10

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

answered Jul 26 '18 at 12:35

s-f

2,091
22
28

In my case, I had to do this, but when I undid this change it still worked :S – Sebastian Correa Zuluaica Jul 05 '23 at 00:47

score 0 · Answer 3 · answered Sep 01 '20 at 10:57

0

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

answered Sep 01 '20 at 10:57

Vibhu kumar

386
3
8

score 0 · Answer 4 · answered Apr 28 '21 at 18:13

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]
})

Router link not working for a component inside a shared module

4 Answers4

Linked