角6模块延迟加载路由器路径混乱

Question

我在使用功能模块进行路由并将子路由加载到主应用程序路由中时遇到问题。

由于某些原因，当我单击指向预期路线的链接时，它实际上是从完全不同的模块加载组件。我已经读到“空”路由会触发这种情况，并且尝试了无数运气不佳的解决方案。

这是我的代码。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms'
import { CKEditorModule } from 'ngx-ckeditor'
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { AttestationService } from './services/attestation.service';
import { AttestationRepository } from './repositories/attestation.repository';
import { AuthorService } from './services/author.service';
import { AuthorRepository } from './repositories/author.repository';
import { UserService } from './services/user.service';
import { UserRepository } from './repositories/user.repository';
import { DocumentService } from './services/document.service';
import { DocumentRepository } from './repositories/document.repository';
import { QuestionnaireService } from './services/questionnaire.service';
import { QuestionnaireRepository } from './repositories/questionnaire.repository';
import { ParameterService } from './services/parameter.service';
import { CompanyService } from './services/company.service';
import { CompanyRepository } from './repositories/company.repository';
import { AttestationsModule } from './attestations/attestations.module';
import { AppRoutingModule } from './/app-routing.module';
import { UiModule } from './ui/ui.module';
import { AuthorsModule } from './authors/authors.module';
import { HomeModule } from './home/home.module';
import { CompaniesModule } from './companies/companies.module';
import { DocumentsModule } from './documents/documents.module';
import { HistoryModule } from './history/history.module';
import { QuestionnairesModule } from './questionnaires/questionnaires.module';
import { PipesModule } from './pipes/pipes.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    AppRoutingModule,
    AttestationsModule,
    AuthorsModule,
    BrowserModule,
    CKEditorModule,
    CommonModule,
    CompaniesModule,
    DocumentsModule,
    FormsModule,
    HistoryModule,
    HomeModule,
    HttpClientModule,
    PipesModule,
    QuestionnairesModule,
    UiModule
  ],
  providers: [
    AttestationService,
    AttestationRepository,
    AuthorService,
    AuthorRepository,
    UserService,
    UserRepository,
    DocumentService,
    DocumentRepository,
    QuestionnaireService,
    QuestionnaireRepository,
    ParameterService,
    CompanyService,
    CompanyRepository
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const appRoutes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: './home/home.module#HomeModule' },
  { path: 'documents', loadChildren: './documents/documents.module#DocumentsModule' },
  { path: 'authors', loadChildren: './authors/authors.module#AuthorsModule' },
  { path: 'attestations', loadChildren: './attestations/attestations.module#AttestationsModule' },
  { path: '**', redirectTo: 'home' }
];

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

export class AppRoutingModule { }

home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Ng2GoogleChartsModule } from 'ng2-google-charts';
import { HomeComponent } from './home/home.component';
import { Routes, RouterModule } from '@angular/router';
import { UiModule } from '../ui/ui.module';

const homeRoutes: Routes = [
  { path: '', component: HomeComponent }
];

@NgModule({
  imports: [
    RouterModule.forChild(homeRoutes),
    CommonModule,
    UiModule,
    Ng2GoogleChartsModule
  ],
  declarations: [HomeComponent]
})
export class HomeModule { }

documents.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DocumentsComponent } from './documents/documents.component';
import { DocumentDetailsComponent } from './document-details/document-details.component';
import { RouterModule, Routes } from '@angular/router';
import { HistoryModule } from '../history/history.module';
import { AuthorsModule } from '../authors/authors.module';
import { PipesModule } from '../pipes/pipes.module';
import { AttestationsModule } from '../attestations/attestations.module';
import { UiModule } from '../ui/ui.module';


const documentRoutes: Routes = [
  { path: '', component: DocumentsComponent },
  { path: 'details/:id', component: DocumentDetailsComponent }
];

@NgModule({
  imports: [
    RouterModule.forChild(documentRoutes),
    CommonModule,
    RouterModule,
    HistoryModule,
    AuthorsModule,
    PipesModule,
    AttestationsModule,
    UiModule
  ],
  declarations: [DocumentsComponent, DocumentDetailsComponent]
})

export class DocumentsModule { }

authors.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AuthorsComponent } from './authors/authors.component';
import { AuthorDetailsComponent } from './author-details/author-details.component';
import { DocumentAuthorsComponent } from './document-authors/document-authors.component';
import { RouterModule, Routes } from '@angular/router';

const authorRoutes: Routes = [
  { path: '', component: AuthorsComponent },
  { path: 'details/:id', component: AuthorDetailsComponent }
];

@NgModule({
  imports: [
    RouterModule.forChild(authorRoutes),
    CommonModule,
    RouterModule
  ],
  declarations: [AuthorDetailsComponent, AuthorsComponent, DocumentAuthorsComponent],
  exports: [DocumentAuthorsComponent]
})

export class AuthorsModule { }

attestations.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AttestComponent } from './attest/attest.component';
import { AttestationsComponent } from './attestations/attestations.component';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', component: AttestationsComponent },
  { path: 'attest/:id', component: AttestComponent }
];

@NgModule({
  imports: [
    RouterModule.forChild(routes),
    CommonModule
  ],
  declarations: [AttestComponent, AttestationsComponent],
  exports: [AttestationsComponent]
})
export class AttestationsModule { }

和HTML菜单

<nav>
  <ul [class.open]="isOpen" (click)="isOpen=false">
    <li [routerLinkActive]="['link-active']">
      <a [routerLink]="['/home']">Home</a>
    </li>
    <li [routerLinkActive]="['link-active']">
      <a [routerLink]="['/documents']">Documents</a>
    </li>
    <li [routerLinkActive]="['link-active']">
      <a [routerLink]="['/authors']">Authors</a>
    </li>
    <li [routerLinkActive]="['link-active']">
      <a [routerLink]="['/attestations']">Attestations</a>
    </li>
    <li class="user">
      <user-greeting></user-greeting>
    </li>
  </ul>
  <a class="menu" (click)="isOpen = !isOpen"><i class="fa fa-bars"></i></a>
</nav>

当我在导航中单击“文档”的链接时，它将带我到浏览器中的URL，但是“作者”组件实际上已加载到屏幕中。

当我在导航中单击“作者”的链接时，它将带我到浏览器中的URL，并加载正确的AUTHORS组件。

当我在导航中单击“证明”的链接时，它将带我到浏览器中的URL，并加载正确的“证明”组件。

我被困住了。