Angular：在多个模块中导入外部模块时出错

Question

我有这样的模块层次结构：

AppModule
  SharedModules
  Module1 (lazy loaded)
  Module2 (lazy loaded)
  Module3 (lazy loaded)

AppModule导入ArlasToolKitModule（从https://github.com/gisaia/ARLAS-wui-toolkit）。效果很好。

现在，在子模块中，我还需要ArlasToolKitModule的某些组件。所以我添加了对Module1的依赖。它引发以下错误：

ERROR Error: Uncaught (in promise): Error: RouterModule.forRoot() called twice. Lazy loaded modules should use RouterModule.forChild() instead.

错误：RouterModule.forRoot（）被调用了两次。延迟加载的模块应改用RouterModule.forChild（）。

据我所知，有2个模块导入了ArlasToolKitModule的路由，而angular不喜欢它。

[我也试图将ArlasToolKitModule添加到import和export部分，出现相同的错误。

我无法编辑ArlasToolKitModule，而且我没有时间提出PR。我该怎么做才能绕过它？是否可以导入没有路由的模块？

[如果我别无选择，只能提出PR，我应该提出什么建议？我认为这与forRoot / forChild有关，但我不太了解其工作原理。

感谢您的帮助！

编辑1：AppModule声明的代码

 import { NgModule, APP_INITIALIZER } from '@angular/core';
import { GestureConfig } from '@angular/material/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSnackBarModule, MAT_SNACK_BAR_DEFAULT_OPTIONS } from '@angular/material/snack-bar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatListModule } from '@angular/material/list';
import { MatIconModule } from '@angular/material/icon';
import { MatDialogModule } from '@angular/material/dialog';
import { MatButtonModule } from '@angular/material/button';
import { BrowserModule, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LandingPageComponent, LandingPageDialogComponent } from '@components/landing-page/landing-page.component';
import { LeftMenuComponent } from '@components/left-menu/left-menu.component';
import { PageNotFoundComponent } from '@components/page-not-found/page-not-found.component';
import { MapConfigModule } from '@map-config/map-config.module';
import { SearchConfigModule } from '@search-config/search-config.module';
import { TimelineConfigModule } from '@timeline-config/timeline-config.module';
import { DefaultValuesService } from '@services/default-values/default-values.service';
import { HttpClientModule } from '@angular/common/http';
import { environment } from 'environments/environment';
import { LoggerModule } from 'ngx-logger';
import { ArlasToolKitModule, ArlasStartupService } from 'arlas-wui-toolkit';
import { SharedModule } from '@shared/shared.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { NgxSpinnerModule } from 'ngx-spinner';
import { StartupService } from '@services/startup/startup.service';
import { ArlasWalkthroughService } from 'arlas-wui-toolkit/services/walkthrough/walkthrough.service';
import { WalkthroughService } from '@services/walkthrough/walkthrough.service';
import { MatBadgeModule } from '@angular/material/badge';

export function loadServiceFactory(defaultValuesService: DefaultValuesService) {
  const load = () => defaultValuesService.load('default.json?' + Date.now());
  return load;
}

@NgModule({
  declarations: [
    AppComponent,
    LeftMenuComponent,
    PageNotFoundComponent,
    LandingPageComponent,
    LandingPageDialogComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ArlasToolKitModule,
    BrowserAnimationsModule,
    HttpClientModule,
    FormsModule,
    MapConfigModule,
    MatButtonModule,
    MatDialogModule,
    MatFormFieldModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatSelectModule,
    MatSidenavModule,
    MatSnackBarModule,
    MatTooltipModule,
    ReactiveFormsModule,
    SearchConfigModule,
    SharedModule,
    TimelineConfigModule,
    LoggerModule.forRoot({
      level: environment.logLevel,
      disableConsoleLogging: false
    }),
    NgxSpinnerModule,
    MatBadgeModule
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: loadServiceFactory,
      deps: [DefaultValuesService],
      multi: true
    },
    {
      provide: ArlasStartupService,
      useClass: StartupService
    },
    {
      provide: ArlasWalkthroughService,
      useClass: WalkthroughService
    },
    {
      provide: MAT_SNACK_BAR_DEFAULT_OPTIONS,
      useValue: { duration: 2500, verticalPosition: 'top' }
    },
    {
      provide: HAMMER_GESTURE_CONFIG,
      useClass: GestureConfig
    }
  ],
  bootstrap: [AppComponent],
  entryComponents: [LandingPageDialogComponent]
})
export class AppModule { }

以及一个子模块的代码：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TimelineConfigRoutingModule } from './timeline-config-routing.module';
import { TimelineConfigComponent } from './timeline-config.component';
import { GlobalTimelineComponent } from './components/global-timeline/global-timeline.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { SharedModule } from '@shared/shared.module';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSelectModule } from '@angular/material/select';
import { TranslateModule } from '@ngx-translate/core';
import { MatInputModule } from '@angular/material/input';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { TimelineFormComponent } from './components/timeline-form/timeline-form.component';
import { MatTabsModule } from '@angular/material/tabs';

@NgModule({
  declarations: [TimelineConfigComponent, GlobalTimelineComponent, TimelineFormComponent],
  imports: [
    CommonModule,
    TimelineConfigRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    SharedModule,
    MatFormFieldModule,
    MatSelectModule,
    TranslateModule,
    MatInputModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatTabsModule
  ]
})
export class TimelineConfigModule { }

Answer 1