Angular Routes are not working in Angular 12

Question

I created a web application in Angular in which i have components, the login component and register component. Each time i add the element routerLink to the <a...> in order for me to navigate from one component to another, it doesn't work. It turns the text or nav item into a read-only text.

The funny thing is that if i change it from "routerLink" to "href", the text/nav item becomes active. I really don't understand why this is happening. I have followed every suggestion made in this forum similar to this but none actually work when i tried them. I also followed suggestions written on the Angular.io website. It is still the same. i also imported RouterModule into my app.module.ts. It hasn't worked as we speak. I am using Angular/CLI 12.2.0, Bootstrap 5, and Typescript 4. Below is my code

<!-- Navbar-->
<nav
class="
  navbar navbar-transparent navbar-color-on-scroll
  fixed-top
  navbar-expand-lg
"
color-on-scroll="100"
id="sectionsNav"
>
<div class="container-fluid">
  <div class="navbar-translate">
    <a routerLink="#" class="navbar-brand">
      <img
        src="../../../assets/img/comgreen.png"
        width="50"
        height="50"
        alt=""
        class="d-inline-block"
      />
      <strong>Comgreen</strong></a
    >
    <button
      class="navbar-toggler"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#navbar"
      aria-controls="navbar"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <span class="sr-only">Toggle navigation</span>
      <span class="navbar-toggler-icon"></span>
      <span class="navbar-toggler-icon"></span>
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
  <div class="collapse navbar-collapse" id="navbar">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a
          routerLink="/login"
          routerLinkActive="active"
          class="nav-link"
          rel="tooltip"
          title=""
          data-placement="bottom"
          target=""
          data-original-title="Log in with your credentials"
        >
          <i class="material-icons">fingerprint</i>Login
        </a>
      </li>
      <li class="nav-item">
        <a
          routerLink="/user-register"
          routerLinkActive="active"
          class="nav-link"
          rel="tooltip"
          title=""
          data-placement="bottom"
          target=""
          data-original-title="Don't have an account? Register"
        >
          <i class="fa fa-user-plus"></i>Register
        </a>
      </li>
      <li class="nav-item">
        <a
          class="nav-link"
          rel="tooltip"
          title=""
          data-placement="bottom"
          target="_blank"
          data-original-title="Follow us on Twitter"
          rel="nofollow"
        >
          <i class="fa fa-twitter"></i>
        </a>
      </li>
      <li class="nav-item">
        <a
          class="nav-link"
          rel="tooltip"
          title=""
          data-placement="bottom"
          routerLink="/hero"
          target="_blank"
          data-original-title="Like us on Facebook"
          rel="nofollow"
        >
          <i class="fa fa-facebook-square"></i>
        </a>
      </li>
      <li class="nav-item">
        <a
          class="nav-link"
          rel="tooltip"
          title=""
          data-placement="bottom"
          routerLink="/hero"
          target="_blank"
          data-original-title="Follow us on Instagram"
          rel="nofollow"
        >
          <i class="fa fa-instagram"></i>
        </a>
      </li>
    </ul>
  </div>
</div>
</nav>
<!--End of Navbar-->

My app.module.ts file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {RouterModule } from '@angular/router';

import { FooterComponent } from './shared/footer/footer.component';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatMenuModule } from '@angular/material/menu';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { SidebarComponent } from './sidebar/sidebar.component';
import { NavbarComponent } from './shared/navbar/navbar.component';
import { MsgiconbtnComponent } from './shared/msgiconbtn/msgiconbtn.component';
import { SettingsService } from './services/settings.service';
import { HomeComponent } from './dashboard/home/home.component';
import { CropComponent } from './dashboard/crop/crop.component';
import { FarmersComponent } from './dashboard/farmers/farmers.component';
import { InsuranceComponent } from './dashboard/insurance/insurance.component';
import { ImagecardComponent } from './shared/imagecard/imagecard.component';
import { AddNewCropDialogModule } from './shared/dialog/add-new-crop-dialog/add-new-crop-dialog.module';
import { AddNewFarmerDialogModule } from './shared/dialog/add-new-farmer-dialog/add-new-farmer-dialog.module';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireModule } from '@angular/fire';
import { environment } from 'src/environments/environment';
import { AngularFireStorageModule } from '@angular/fire/storage';
import { MorecropinfoModule } from './shared/dialog/morecropinfo/morecropinfo.module';
import { UpdateCropInfoModule } from './shared/dialog/update-crop-info/update-crop-info.module';
import { SplashComponent } from './pages/splash/splash.component';
import { HeaderComponent } from './shared/header/header.component';
import { ReactiveFormsModule } from '@angular/forms';
import { userRegisterComponent } from './pages/userregister/userRegister.component';
import { VerifyEmailComponent } from './pages/verify-email/verify-email.component';
import { ForgotPasswordComponent } from './pages/forgot-password/forgot-password.component';
import { LoginComponent } from './pages/login/login.component';
import { RegisterUserComponent } from './pages/register-user/register-user.component';


@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,    
    FooterComponent,
    SidebarComponent,
    NavbarComponent,
    MsgiconbtnComponent,
    HomeComponent,
    CropComponent,
    FarmersComponent,
    InsuranceComponent,
    ImagecardComponent,
    SplashComponent,
    userRegisterComponent,
    LoginComponent,
    VerifyEmailComponent,
    ForgotPasswordComponent,
    userRegisterComponent,
    RegisterUserComponent,
    
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    MatFormFieldModule,
    RouterModule,
    MatInputModule,
    MatButtonModule,
    MatCheckboxModule,
    MatMenuModule,
    HttpClientModule,
    MorecropinfoModule,
    AddNewCropDialogModule,
    AddNewFarmerDialogModule,
    UpdateCropInfoModule,
    BrowserAnimationsModule,
    AngularFirestoreModule,
    AngularFireAuthModule,
    AngularFireStorageModule,
    AngularFireModule.initializeApp(environment.firebaseConfig)
  ],
  providers: [SettingsService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Where am i going wrong?

Can you attach app.module.ts to show how you import RouterModule with routes? You may also create Minimal, Reproducible Example on StackBlitz. — Yong Shun
– Yong Shun, Commented Aug 8, 2021 at 11:22
I have edited my question to include my app.module.ts code. i hope it helps. — Vintage Farms
– Vintage Farms, Commented Aug 9, 2021 at 14:48
Hi, saw you have AppRoutingModule and RouterModule in app.module.ts. Please remove RouterModule. Expected you will export RouterModule from AppRoutingModule. And you need to make sure that routerLink path must be exact as the route path in your app.module.ts. Created sample demo for your reference. — Yong Shun
– Yong Shun, Commented Aug 10, 2021 at 0:53
@YongShun Thanks for this. I removed the RouterModule and added the FormsModule as you suggested and it worked. The scary part now is that it converts again to text when i add the attribute formControlName="" to the input tag of my form. I guess that should be another question in this forum now. — Vintage Farms
– Vintage Farms, Commented Aug 10, 2021 at 13:13
I have solved it. I used [formControl]="" instead of formControlName="" and my routerLinks are now working fine. — Vintage Farms
– Vintage Farms, Commented Aug 10, 2021 at 21:12

LeiseLeo · Accepted Answer · 2021-08-08 06:14:24Z

2

I don't know if it would make a difference but in my project I moved the routerLinkActive = "active" to the html li tag. Maybe it does also work for you...

<li class="nav-item"
    routerLinkActive="active">
    <a
      routerLink="/login"
      class="nav-link"
      rel="tooltip"
      title=""
      data-placement="bottom"
      target=""
      data-original-title="Log in with your credentials"
    >
      <i class="material-icons">fingerprint</i>Login
    </a>
  </li>

answered Aug 8, 2021 at 6:14

LeiseLeo

362 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vintage Farms Over a year ago

Thanks for you suggestion. It worked for one of my component.html ie Login page but it didn't for another page ie Registeration page. I just don't get why it is doing so.

LukaszSobczak · Accepted Answer · 2024-01-16 19:06:08Z

1

I had a similar problem but with Angular 17. I had to add RouterLink to imports in my standalone component:

@Component({
  selector: 'app-menu',
  standalone: true,
  imports: [RouterLink],
// the rest omitted for clarity })

answered Jan 16, 2024 at 19:06

LukaszSobczak

2612 silver badges5 bronze badges

Comments

Smokovsky · Accepted Answer · 2021-08-10 13:13:32Z

0

Try with square brackets, just like it was array of path elements:

<a [routerLink]="['/user-register']">Link</a>

Then if you want deeper it would look like this:

// const userId = '12345';
<a [routerLink]="['/user', 'profile', userId]">Link</a>

This will redirect you to localhost:4200/user/profile/12345

And if we are talking about style of link, like underline/color change on hover, just use some css:

a {
 color: black;
 cursor: pointer;
}
a:hover {
 color: red;
 text-decoration: underline;
} // ...etc whatever you need

edited Aug 10, 2021 at 13:13

answered Aug 8, 2021 at 12:17

Smokovsky

5771 gold badge8 silver badges24 bronze badges

3 Comments

Vintage Farms Over a year ago

Adding brackets didn't work for it. I saw that as an example on angular.io which i tried but it still didn't work.

Smokovsky Over a year ago

Okay, sorry my mistake, it should look like this <a [routerLink]="['/path']">Link</a>, can you try this please?

Vintage Farms Over a year ago

This also worked but the main issue here now is that it get converted to a text when i add the attribute formControlName to the input tag of my form. Thanks

Collectives™ on Stack Overflow

Angular Routes are not working in Angular 12

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related