У меня есть такая иерархия модулей:
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 { }