Angular route navigation not redirecting to other component

Question

I am new to angular and i am working on angular 4 app and trying to navigate from module component to layout component when button clicked. but navigate not working.

and i don't see any error message.

i spent lot of time on google to resolve this issue but i am unable to resolve.

below is the code.

html:

      <div class="land-item" (click)="qualityrd()">      
      <h3>QAULITY</h3>
      <i class="fa fa-thumbs-o-up"  style="color:blue"></i>
      <div class="over-item">

component:

import {Component} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';

@Component({
    selector: 'app-module-selector',
    templateUrl: './module-selector.component.html',
    styleUrls: ['../css/style.css', '../css/responsive.css']
})
export class ModuleSelectorComponent {

    constructor(
        private _router: Router, private route: ActivatedRoute) {
    }
    
    qualityrd(): void {
        this._router.navigate(['/QualityLayout']);
    }
}

Layout Component

import {Component} from '@angular/core';

@Component({
    selector: 'my-app',
    templateUrl: './Layout.html',
    styleUrls: ['../css/footer.css']
})
export class LayoutComponent {
    isIn = false;   // store state
    toggleState() { // click handler
        let bool = this.isIn;
        this.isIn = bool === false ? true : false;
    }
}

And finally my app module:

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http';
import {AppComponent} from './app.component';
import {RouterModule, Routes} from '@angular/router';
import {LayoutComponent} from './Layout/Layout.Component';
import {ExcelDownloadComponent} from './ExcelDownload/ExcelDownload.Component';
import {ExcelUploadComponent} from './ExcelUpload/ExcelUpload.Component';
import {SpotCheckStatusComponent} from './spotCheck/spotcheckstatus.component';
import {PageNotFoundComponent} from './others/PageNotFoundComponent';
import {FileDropDirective, FileSelectDirective} from 'ng2-file-upload';
import {ModuleSelectorComponent} from './module-selector/module-selector.component';

const appRoutes: Routes = [
    {path: 'SPOTCHECK', component: SpotCheckStatusComponent},
    {path: 'ExcelDownalod', component: ExcelDownloadComponent},
    {path: 'ExcelUpload', component: ExcelUploadComponent},
    {path: 'ModuleSelector', component: ModuleSelectorComponent},
    {path: 'QualityLayout', component: LayoutComponent},
    {path: '', redirectTo: '/ModuleSelector', pathMatch: 'full'},
    {path: '**', component: PageNotFoundComponent}
];

@NgModule({
    declarations: [AppComponent, SpotCheckStatusComponent, PageNotFoundComponent,
        LayoutComponent, ExcelDownloadComponent, ExcelUploadComponent,
        ExcelDownloadComponent, FileDropDirective, FileSelectDirective, ModuleSelectorComponent],
    imports: [BrowserModule, FormsModule, HttpModule, ReactiveFormsModule,
        RouterModule.forRoot(appRoutes)],
    providers: [],
    bootstrap: [ModuleSelectorComponent]
})
export class AppModule {
}

Answer 1

Below is a partial code for my app.module and it works.

providers: [CategoryService, SubCategoryService, FeaturedBrandService, 
  {provide: LocationStrategy, useClass: HashLocationStrategy}
],
bootstrap: [AppComponent]  ** instead of Module Selector component
})
export class AppModule { }

Your code should work with this change. Otherwise, you may may have to breakdown your code (comments some of your codes) until it can route to QualityLayout. Just trying to help.