Angular2 Router link not working

Question

My router link works from the root component and the same link not working if I move the links to child component. The plunker code shows the working link and non working link. Thank you in advance. The below is the not working links.

//our root app component
import {Component} from '@angular/core'

@Component({
    selector: 'my-menu',
    template: `
    <div>
    <a routerLink="/comp11" routerLinkActive="active">Crisis Center</a> | 
    <a routerLink="/comp12" routerLinkActive="active">Heroes</a> | 
    <a routerLink="/comp21" routerLinkActive="active">Heroes</a> | 
    <a routerLink="/comp22" routerLinkActive="active">Heroes</a>
  </div>
`,
})
export class AppLayout {}

Plunker code with issue

score 27 · Accepted Answer · edited Apr 19 '17 at 20:09

27

You should import RouterModule in your AppLayoutModule so it looks as follows:

import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AppLayout} from './layout.component';
import {RouterModule} from '@angular/router';

@NgModule({
    imports: [ BrowserModule, RouterModule ],
    declarations: [ AppLayout ],
    exports: [ AppLayout ]
})

export class AppLayoutModule {}

Without it component didn't know what the routerLink is and do not compile it to correct href attributes.

Updated Plunker here

edited Apr 19 '17 at 20:09

isherwood

58,414
16
114
157

answered Nov 11 '16 at 17:51

Marcin

1,426
16
19

Hi @Marcin, i am curious, RouterModule was imported in AppRoutingModule, it shall be visible to all other feature modules, so am i wrong? – Howard Jan 12 '17 at 15:41
@Howard, it is not visible because modules do not inherit access to components, providers, etc. of other modules. Thus what is imported by AppModule is not accessible/visible for AppLayoutModule. – Marcin Jan 13 '17 at 21:41
Hi @Marcin, thanks for you answering. This confused me a lot. So if i have a third party module A which declares few `components`, u mean i cannot use them in any other feature modules if i just `import` this module A into root module? It's a bit weird, what if this module A requires a `forRoot` configuration? Do i have to `import` & `config` it in every feature module depends on it? – Howard Jan 16 '17 at 08:58
@Howard, yes, you have to import this third party module in every feature module that uses components from it, because there is no inheritance between them. There are several reasons of such an approach, first of all - due to the possibility of lazy loading - you can load the modules, with components necessary for it to work, and they do not have to be loaded in the root module. The other is that, every module should be implemented in such a way, that you are able to reuse it in the other app - other parent module, so it should be self-sufficient. I hope that it is more clear for you now. – Marcin Jan 17 '17 at 13:13
1

You know what? You saved my weekend :-) I'm a little bit disappointed, that angular (>=4) does not seem to reckognise the missing `RouterModule` and silently just ignores the `routerLink` directives. – Christof Kälin May 20 '17 at 08:57

score 1 · Answer 2 · answered Nov 11 '16 at 17:58

In order for the routerlink to work, you must import the Router to the component where you are working

Example

Import {Component} from '@ angular / core';
Import {Router} from '@ angular / router';

@Component ({
Selector: 'my-menu',
template:
<Div>
<a [routerLink]=["/comp11"]> Crisis Center </a>
<a <routerLink]=["/comp12"]> Heroes </a>
<a [routerLink]=["/comp21"]> Heroes </a>
<a <routerLink]=["/comp22"]> Heroes </a>
</ Div>
,}) 
Export class AppLayout{}

Thank you!

score 0 · Answer 3 · answered Jan 16 '18 at 00:04

If this was a standalone component that was imported into a module then you could as well just add the RouterModule to the imports of your module. I for one like to have the module declarations in my own file so a solution here would be to have app-module.

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {AppLayoutModule} from '...'; <--could also be a component

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        AppLayoutModule,
        BrowserModule,
        RouterModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {}

The only thing you must be sure of is that the RouterModule is imported into the module that uses the routerLink directive, either in the module file or the component file.

score 0 · Answer 4 · answered Dec 22 '21 at 17:59

RouterModule is helping the consuming component to compile routerLink(directive) into correct href attributes. You can solve this issue in two ways.

You should import RouterModule inside your AppLayoutModule and other child modules also as below:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RouterModule } from '@angular/router';

import { AppLayout } from './layout.component';

@NgModule({
    imports: [ 
      BrowserModule, 
      RouterModule 
    ],
    declarations: [AppLayout],
    exports: [AppLayout]
})

export class AppLayoutModule {}

Otherwise simply create SharedModule and import & export RouterModule inside SharedModule. Then import SharedModule inside your child modules(This is the best way). You can also add all of your dependent modules inside SharedModule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    RouterModule
  ],
  exports: [
    RouterModule
  ]
})
export class SharedModule { }

Angular2 Router link not working

4 Answers4

Linked