Angular 4+: RouterLink in element not working properly

Question

I have placed my AppRoutingModule inside imports of @NgModule of AppModule class.

AppRoutingModule is defined in such way:

const APP_ROUTES : Routes = [
    { 
        path: '', 
        redirectTo: 'home', 
        pathMatch: 'full',
    },
    {
        path: 'home', 
        component: HomeComponent
    },
    {
        path: 'lesson-offers', 
        component: LessonOffersComponent
    },

    { path: '**', redirectTo: 'home' }
]

I have placed <router-outlet></router-outlet> in the app.component.html.

Pages displays correctly based on URLs:

localhost:5000/  
localhost:5000/home  
localhost:5000/lesson-offers

The problem is in my header.component.ts where I am trying to add routerLink to home page. I have tried such solutions:

<img routerLink="home" ... />
<img [routerLink]="/home" ... />
<a routerLink="home"> <img ... /></a>
<a [routerLink]="home" ... ><img ... /></a>

Firstly when I placed routerLink in <img> element such directive hasn't been found. Then in <a> element it makes casual <a href="/home"> from routerLink and makes full page reloading ! Shouldn't it reload only content of <router-outlet>?

Maybe it has some meaning that my layout looks like this:

// AppComponent HTML
<header-bar></header-bar>
<router-outlet></router-outlet>

and routerLink is placed on element in children component <header-bar> (logo) and should navigate on <router-outlet> in its parent?

But I have also tested this behaviour using routerLinks placed directly inside AppComonent and nothing has changed! RouterLink still reloads the webpage!:

<header-bar></header-bar>
<a routerLink="home">Home</a> 
<a routerLink="lesson-offers">Lesson Offers</a>
<a routerLink="page-not-found">Not Exsists</a>
<router-outlet></router-outlet>

Answer 1

You need more to make routing work. Here is how your AppRoutingModule file should look like

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

const APP_ROUTES : Routes = [
    { 
        path: '', 
        redirectTo: 'home', 
        pathMatch: 'full',
    },
    {
        path: 'home', 
        component: HomeComponent
    },
    {
        path: 'lesson-offers', 
        component: LessonOffersComponent
    },

    { path: '**', redirectTo: 'home' }
]

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

Answer 2

For anyone else having this issue, try this:

<a [routerLink]="['/home']" ... ><img ... /></a>

instead of this:

<a [routerLink]="home" ... ><img ... /></a>

Answer 3

To solve this problem, Need to import RouterModule module in header.Component.ts imported module. That means this component of parent module. Then run the CLI command ng serve

For Example:

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

import { HeadComponent } from './head/head.component';


@NgModule({
  declarations: [HeadComponent],
  imports: [
    CommonModule,
    RouterModule,

  ],
  exports: [
    CommonModule,
    HeadComponent
  ]
})
export class LayoutModule { }

This solution worked for my Angular 10 application

Answer 4

Ok I actually found the error and it was in the place that I have never ever will suppose. There was also other different behaviours like not working (click) event bindings. So I go across configurations of my web project which is base upon this sample angular 4 universal spa from github: https://github.com/MarkPieszak/aspnetcore-angular2-universal

1. I have made upgrade from ASP NET Core SPA that was generated with yeoman tool.

npm install -g yo generator-aspnetcore-spa

Then, cd to an empty directory where you want your project to go, and then run Yeoman as follows:

yo aspnetcore-spa

2. Then I have noticed that there isn't possible to easily use Leaflet Open Street Maps while using server-side pre-rendering.

3. So made this upgrade from Angular 2+ -> Angular 4+, buy modifying each files configuration, module, boot, webpack, tsconfig, etc. file. I really was under big impression of this starter project under github:
   https://github.com/MarkPieszak/aspnetcore-angular2-universal

4. At the end of the day I noticed that I remain some old code that I suppose that will be running correctly:

// boot.client.ts 
platform.destroy();
    });
} else {
    enableProdMode();
}

// Boot the application, either now or when the DOM content is loaded
const platform = platformUniversalDynamic();
const bootApplication = () => { platform.bootstrapModule(AppModule); };
if (document.readyState === 'complete') {
    bootApplication();
} else {
    document.addEventListener('DOMContentLoaded', bootApplication);
}

And the correct one in the new version of angular universal project that looks similar should be:

 modulePromise.then(appModule => appModule.destroy());
    });
} else {
    enableProdMode();
}

const modulePromise = 
 platformBrowserDynamic().bootstrapModule(BrowserAppModule);

PS. Previously I also made replacement of platformUniversalDynamic => platformBrowserDynamic.

Answer 5

After many years passed from last answer, I didn't easily find correct answer. Also, I observed some erroneous answer. Therefore I want to added clear description about the usage of the routerlink in the HTML file of component for Angular 8++. After adding router paths to routingmodule , in order to use this routes in angular component:

1. Import RouterModule to which module component have been declared
2. Set route to routerLink in the HTML. Because of case sensitivity of the routerLink, be cautious not to use routerlink.

don't need adding nav-link class or import router to your component.