Angular 8 routerLink not wokring

Question

When I change the path to the correct routes in the url bar I get where I need to go and everything displays correctly. The actual router links are not taking me anywhere.

I have NgModule, Routes and RouterModule all imported properly in my only module. I have my components imported properly. router-outlet is properly placed. I have base href="/" in the head of my index.html.

Here is part of my html:

<section class="vertical-sidebar collapse navbar-collapse justify-content-end" id="navbarSidebarContent-main"
        [ngClass]="{'show':displaySideNav}">
        <nav class="nav">
            <ul class="sidebar-links">
                <li>
                    <a routerLink="/home">Home</a>
                </li>
                <li>
                    <a routerLink="/manage-sessions">Manage Sessions</a>
                </li>
                <li>
                    <a routerLink="/export-scancodes">Export ScanCodes</a>
                </li>
                <li>
                    <a routerLink="/imu-data">IMU Data</a>
                </li>
                <li>
                    <a routerLink="/global-order-days">Global Order Days</a>
                </li>
                <li>
                    <a routerLink="/order-exception-report">Order Exception Report</a>
                </li>
            </ul>
        </nav>
    </section>

I expect to be directed to the correct path when I click on the link. Nothing happens when I do so.

please share you ngModule and component.ts where this router links are used to fix it easily — Naga Sai A, Sep 30 '19 at 20:08
Why the brackets, are you binding anything? It should be: `routerLink="/home"` — Michelangelo, Sep 30 '19 at 20:11
Possible duplicate of [Difference between \[routerLink\] and routerLink](https://stackoverflow.com/questions/41370760/difference-between-routerlink-and-routerlink) — Michelangelo, Sep 30 '19 at 20:13
@JadenAdams, I created stackblitz - https://stackblitz.com/edit/angular-gjpwwg?file=src/app/app.module.ts and it seems to be working fine — Naga Sai A, Oct 01 '19 at 16:52

score 1 · Answer 1 · answered Sep 30 '19 at 20:10

1

Try as mentioned in docs

            <ul class="sidebar-links">
                <li>
                    <a routerLink="/home">Home</a>
                </li>
                ....
            </ul>

answered Sep 30 '19 at 20:10

dota2pro

7,220
7
44
79

Can you reproduce this in stackblitz ? here https://stackblitz.com/edit/angular-router-basic-example fork this – dota2pro Sep 30 '19 at 20:17
Your github is working perfectly fine check `dist/index.html` – dota2pro Sep 30 '19 at 21:34
I'm sorry. The dist folder was not supposed to be included. Please check src/app – JCA Sep 30 '19 at 21:50

score 0 · Answer 2 · answered Oct 02 '19 at 01:27

After a lot of trail and error yesterday I realized the issue came because a lot of the code had been given to me as boilerplate code that had been manually upgraded from Angular6 to 8. I created a new project in the cli from scratch and copied over my components and had no issues.

Angular 8 routerLink not wokring

2 Answers2