Angular: ошибка импорта внешнего модуля в несколько модулей - PullRequest
0 голосов
/ 03 апреля 2020

У меня есть такая иерархия модулей:

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.for Root () вызывается дважды. Вместо этого загруженные модули должны использовать RouterModule.forChild ().

Насколько я понимаю, 2 модуля импортируют маршруты ArlasToolKitModule, а angular это не нравится.

Я также пытался добавить ArlasToolKitModule к частям import и export, с той же ошибкой.

Я не могу редактировать ArlasToolKitModule и у меня нет времени предлагать PR. Что я могу сделать, чтобы обойти это? Можно ли импортировать модуль без его маршрутов?

Если у меня нет выбора, кроме как предложить PR, что я должен предложить? Я думаю, что это связано с Root / 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 { }
...