Can't navigate to other components in angular 7 - html

Question

I have an angular project with 3 components namely:- Search,View,Insert, each component have their own routing-module and module.ts files.
However the issue is I am not able to navigate from Search to View or Insert by clicking on Sidebar Option. However if I create a button and use this.router.navigateByUrl('/view'); then I am able to go to View Page.
Similarly in Insert Page also I am having same issue.
Project Structure:
Layout Routing File:-
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { LayoutComponent } from './layout.component';
const routes: Routes = [
{
path: '',
component: LayoutComponent,
children: [
{
path: '',
redirectTo: 'search',
pathMatch: 'prefix'
},
{
path: 'search',
loadChildren: './search/search.module#SearchModule'
},
{
path: 'view',
loadChildren: './view/view.module#ViewModule'
},
{
path: 'insert',
loadChildren: './insert/insert.module#InsertModule'
},
]
}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class LayoutRoutingModule { }
app.module.ts
import { CommonModule } from '#angular/common';
import { HttpClientModule } from '#angular/common/http';
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { BrowserAnimationsModule } from '#angular/platform-
browser/animations';
import { LanguageTranslationModule } from './shared/modules/language-
translation/language-translation.module';
import { AngularMaterialModule } from '../app/angular-material.module';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AuthGuard } from './shared';
import {MatFormFieldModule, MatSelectModule, MatInputModule,
MatButtonModule} from '#angular/material';
import { CustomHttpService } from '../app/shared/services/custom-
http.service';
import { UserService } from './shared/services/user.service';
#NgModule({
imports: [
CommonModule,
BrowserModule,
BrowserAnimationsModule,
HttpClientModule,
LanguageTranslationModule,
AppRoutingModule,
MatFormFieldModule,
MatSelectModule,
MatInputModule,
MatButtonModule,
AngularMaterialModule
],
declarations: [AppComponent],
providers: [AuthGuard, CustomHttpService, UserService],
bootstrap: [AppComponent]
})
export class AppModule {
}
Sidebar.component.html
<nav class="sidebar" [ngClass]="{ sidebarPushRight: isActive, collapsed:
collapsed }">
<div class="list-group">
<a routerLink="/search" [routerLinkActive]="['router-link-active']"
class="list-group-item">
<i class="fa fa-fw fa-search"></i>
<span>{{ 'Search' }}</span>
</a>
<a routerLink="/dashboard" [routerLinkActive]="['router-link-active']"
class="list-group-item">
<i class="fa fa-eye" aria-hidden="true"></i>
<span>{{ 'Dashboard' }}</span>
</a>
<a routerLink="/dashboard" [routerLinkActive]="['router-link-active']"
class="list-group-item">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
<span>{{ 'Insert' }}</span>
</a>
</nav>

Answer 1

Try like this
<a [routerLink]="['/dashboard']"
class="list-group-item">
<i class="fa fa-eye" aria-hidden="true"></i>
<span>{{ 'Dashboard' }}</span>
</a>
for more information refer this https://angular.io/api/router/RouterLink#description

Answer 2

Try replacing [routerLinkActive]="['router-link-active'] with [routerDirection]="'root'" in your Sidebar.component.html file
<a routerLink="/search" [routerDirection]="'root'"
class="list-group-item">
<i class="fa fa-fw fa-search"></i>
<span>{{ 'Search' }}</span>
</a>