Router link not working for a component inside a shared module
<p>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.</p>

<p>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. </p>

<p>I have included the code snippets below.</p>

<p>Shared Module file</p>

<pre><code>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 { }
</code></pre>

<p>Customer module file</p>

<pre><code>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 { }
</code></pre>

<p>Header component html</p>

<pre><code>&lt;div class="header-wrapper"&gt;
    &lt;nav class="navbar navbar-light bg-faded"&gt;
        &lt;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"&gt;&lt;/button&gt;
        &lt;div class="collapse navbar-toggleable-md" id="navbarResponsive"&gt;
            &lt;a class="navbar-brand header-logo" routerLink="./"&gt;Your space your time&lt;/a&gt;
            &lt;ul class="nav navbar-nav header-menu float-lg-right"&gt;
                &lt;li class="nav-item header-menu-item"&gt;
                    &lt;a class="nav-link header-menu-link" href="#"&gt;About&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="nav-item header-menu-item"&gt;
                    &lt;a class="nav-link header-menu-link" href="#"&gt;Services&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="nav-item header-menu-item"&gt;
                    &lt;a class="nav-link header-menu-link" routerLink="./signin" routerLinkActive="active"&gt;Login &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="nav-item header-menu-item"&gt;
                    &lt;a class="nav-link header-menu-link" routerLink="./signup" routerLinkActive="active"&gt;Register&lt;/a&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/nav&gt;
&lt;/div&gt;
</code></pre>

<p>Customer routing module</p>

<pre><code>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 { }
</code></pre>