menu

Questions & Answers

Angular routerlink is not working for some reason

I have no idea why this router link is not working

I just want this router to navigate to search module. Well the interesting point is the fact that the page url is localhost4200/technology but still stayes on the homepage, as if there is no search component. I don't really know what to do

``` homepage router ```
<a class="link-header" routerLink="search">See Recipe</a>
```
``` my app module file ```
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MealsComponent } from './meals/meals.component';
import { HttpClientModule } from '@angular/common/http';
import { SearchMealComponent } from './search-meal/search-meal.component';
import { MealAppComponent } from './meal-app/meal-app.component';
import { HomeComponent } from './home/home.component';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    MealsComponent,
    SearchMealComponent,
    MealAppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    ReactiveFormsModule
  ],
  providers: [RouterModule],
  bootstrap: [AppComponent]
})
 export class AppModule { }
```

``` app-routing-module paths ```
 const routes: Routes = [
  { path:'search', component:SearchMealComponent }
];
```
Answers(1) :

The problem looks like your app-routing.modules.ts file isn't configured properly

homepage router

<a class="link-header" routerLink="search">See Recipe</a>

my app module file

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MealsComponent } from './meals/meals.component';
import { HttpClientModule } from '@angular/common/http';
import { SearchMealComponent } from './search-meal/search-meal.component';
import { MealAppComponent } from './meal-app/meal-app.component';
import { HomeComponent } from './home/home.component';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    MealsComponent,
    SearchMealComponent,
    MealAppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    ReactiveFormsModule
  ],
  providers: [RouterModule],
  bootstrap: [AppComponent]
})
 export class AppModule { }

app-routing-module paths

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SearchMealComponent } from './search-meal/search-meal.component';

 const routes: Routes = [
  { path:'search', component: SearchMealComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

export class AppRoutingModule { }

These issues typically happen when you don't ng generate when creating a new file, you run the risk of excluding assets or dependencies.

Hope that helps.