无法从导航栏导航到角度6组件

Question

This is my app.routing.module.ts code :

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PageLoginComponent } from './components/page-login/page-login.component';
import { LoginGuard } from './login.guard';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { CreatedDatasourcesComponent } from './components/created-datasources/created-datasources.component';
import { RegisterComponent } from './components/register/register.component';

const routes: Routes = [
    { path: '', component: PageLoginComponent },
    { path: 'login', component: PageLoginComponent },
    {
        path: 'signup',
        component: RegisterComponent
      },
{
        path: 'dashboard',
        canActivate: [LoginGuard],
        children: [
            { path: '', component: DashboardComponent }
        ]
    },
    { path: 'datasources', component: CreatedDatasourcesComponent },
    { path: 'datasources/:status', component: CreatedDatasourcesComponent },

];

@NgModule({

    imports: [RouterModule.forRoot(routes, {useHash: true})],
    exports: [RouterModule]
})
export class AppRoutingModule { }


This is app.module.ts code :

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

import { HttpModule } from '@angular/http';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PageLoginComponent } from './components/page-login/page-login.component';
import { LoginService } from './services/login.service';
import { LoginGuard } from './login.guard';
import { CustomInterceptor } from './custom-interceptor.service';
import { GetsrcdestService } from './services/getsrcdest.service';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { DatasourcesComponent } from './components/datasources/datasources.component';
//import { MatFormFieldModule } from '@angular/material/form-field';
import { ConnectionsContainerComponent } from './components/connections/connections-container/connections-container.component';
import { ConnectionsSelectorComponent } from './components/connections/connections-selector/connections-selector.component';
import { ConnectionsSearchComponent } from './components/connections/connections-search/connections-search.component';
import { ConnectionsListComponent } from './components/connections/connections-list/connections-list.component';
import { BackdropComponent } from './components/backdrop/backdrop.component';
import { ConnectionsSourceValidatorComponent } from './components/connections/connections-source-validator/connections-source-validator.component';
import { ConnectionsDestinationValidatorComponent } from './components/connections/connections-destination-validator/connections-destination-validator.component';
import { IsvalidService } from './services/isvalid.service';
import { ConnectionsDestinationFormComponent } from './components/connections/connections-destination-form/connections-destination-form.component';
import { ConnectionsFilterEndpointsComponent } from './components/connections/connections-filter-endpoints/connections-filter-endpoints.component';
import { FetchdbsService } from './services/fetchdbs.service';
import { ValidateService } from './services/validate.service';
import { ConnectionsSchedulerComponent } from './components/connections/connections-scheduler/connections-scheduler.component';
import { NavbarComponent } from './components/navbar/navbar.component';
import { ConnectionsStepperComponent } from './components/connections/connections-stepper/connections-stepper.component';
import { NgbModule, NgbDropdown } from '@ng-bootstrap/ng-bootstrap';
import { MatSidenavModule } from '@angular/material/sidenav';
import { CreatedDatasourcesComponent } from './components/created-datasources/created-datasources.component';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatTableModule } from '@angular/material';
import { ChartsModule } from 'ng2-charts';
import { SidenavComponent } from './components/sidenav/sidenav.component';
import { DashboardDataService } from './dashboard-data.service';
import { LandingPageComponent } from './components/landing-page/landing-page.component';
import{FooterComponent} from './components/footer/footer.component';
import{RegisterComponent} from './components/register/register.component';
import { AlertService } from './services/alert.service';
import { SignupService } from './services/signup.service';
import{ReactiveFormsModule} from '@angular/forms'



@NgModule({
    declarations: [
        AppComponent,
        PageLoginComponent,
        DashboardComponent,
        DatasourcesComponent,
        ConnectionsContainerComponent,
        ConnectionsSelectorComponent,
        ConnectionsSearchComponent,
        ConnectionsListComponent,
        BackdropComponent,
        ConnectionsSourceValidatorComponent,
        ConnectionsDestinationValidatorComponent,
        ConnectionsDestinationFormComponent,
        ConnectionsFilterEndpointsComponent,
        ConnectionsSchedulerComponent,
        NavbarComponent,
        ConnectionsStepperComponent,
        CreatedDatasourcesComponent,
        SidenavComponent,
        LandingPageComponent,
        FooterComponent,
        RegisterComponent

    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        AppRoutingModule,
        FormsModule,
        HttpModule,
        HttpClientModule,
        NgbModule.forRoot(),
        MatSidenavModule,
        MatExpansionModule,
        MatTableModule,
        ChartsModule,
    ReactiveFormsModule

    ],
    providers: [
        LoginService,
        GetsrcdestService,
        IsvalidService,
        FetchdbsService,
        ValidateService,
        DashboardDataService,
        AlertService,
        SignupService,

        { provide: HTTP_INTERCEPTORS, useClass: CustomInterceptor, multi: true },
        LoginGuard
    ],
    bootstrap: [LandingPageComponent]
})
export class AppModule { }


and following is the line of code where i am calling the component 

 <li class="nav-item active">
                                <a routerLink="signup" class="nav-link">SignUp</a>
                            </li>

在app.module.ts中以及路由文件中的任何地方都导入了新组件，但仍无法正常工作，未显示任何控制台错误。 在链接上单击时，它显示在URL /signup中，但未显示组件。

如何解决此问题以及如何使以下代码的链接起作用？