Html Can'；t导航到angular 7中的其他组件

我有一个有3个组件的角度项目，即：-搜索，查看，插入，每个组件都有自己的路由模块和module.ts文件。 但问题是，我无法通过单击边栏选项从搜索导航到查看或插入。但是，如果我创建一个按钮并使用

this.router.navigateByUrl（'/view'）然后我可以进入查看页面。
同样在插入页面中我也有同样的问题。
项目结构：

布局布线文件：-

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>&nbsp;
  <span>{{ 'Search' }}</span>
</a>
<a routerLink="/dashboard" [routerLinkActive]="['router-link-active']" 
class="list-group-item">
  <i class="fa fa-eye" aria-hidden="true"></i>&nbsp;
  <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>&nbsp;
  <span>{{ 'Insert' }}</span>
</a>
</nav>


{{‘搜索}}
{{‘仪表板}}
{{'插入'}}
尝试将侧边栏.component.html文件中的
[routerLinkActive]=“['router-link-active']
替换为
[routerDirection]=“'root'”

<a routerLink="/search" [routerDirection]="'root'" 
class="list-group-item">
  <i class="fa fa-fw fa-search"></i>&nbsp;
  <span>{{ 'Search' }}</span>
</a>


{{‘搜索}}
像这样试试

<a [routerLink]="['/dashboard']"
 class="list-group-item">
 <i class="fa fa-eye" aria-hidden="true"></i>&nbsp;
 <span>{{ 'Dashboard' }}</span>
</a>

你能显示你的应用程序模块吗？试着使用这个：this.router.navigate（['/view']）；@Sarkani我应该在哪里使用？@JonasPraem我已经添加了app.module文件你能显示一个你有
路由器链接的模板吗？