Блог

Я пытаюсь реализовать отложенную загрузку в свое приложение, но получаю это сообщение об ошибке :

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

app-module.ts

 import { AdminLayoutModule } from './homestay-admin/layouts/admin-layout/admin-layout.module';
import { HomestayModule } from './homestay/homestay.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app.routing';
import { ComponentsModule } from './homestay-admin/components/components.module';
import { AppComponent } from './app.component';
import { AdminLayoutComponent } from './homestay-admin/layouts/admin-layout/admin-layout.component';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    ComponentsModule,
    RouterModule,
    AppRoutingModule,
    HomestayModule,
    AdminLayoutModule,
  ],
  declarations: [
    AppComponent,
    AdminLayoutComponent,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

app-routing.module.ts

 import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AdminLayoutComponent } from './homestay-admin/layouts/admin-layout/admin-layout.component';

const routes: Routes = [
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full',
  },
  {
    path: '',
    component: AdminLayoutComponent,
    children: [
      {
        path: 'homestay-Backend',
        loadChildren:
          './homestay-admin/layouts/admin-layout/admin-layout.module#AdminLayoutModule',
      },
    ],
  },
  {
    path: '',
    children: [
      {
        path: 'homestay',
        loadChildren:
          './homestay/homestay.module#HomestayModule',
      },
    ],
  },
];

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

 

Homestay.module.ts

 import { AppRoutingModule } from './../app.routing';
import { RouterModule } from '@angular/router';
import { Homestayroutes } from './homestay-routing.moddule';
import { InputNumberModule } from 'primeng/inputnumber';
import { DropdownModule } from 'primeng/dropdown';
import { InputTextModule } from 'primeng/inputtext';
import { CalendarModule } from 'primeng/calendar';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomestayComponent } from './homestay.component';
import { SlickCarouselModule } from 'ngx-slick-carousel';

import { NgwWowModule } from 'ngx-wow';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';


@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(Homestayroutes),
    AppRoutingModule,
    SlickCarouselModule,
    NgbModule,
    NgwWowModule,
    CalendarModule,
    InputTextModule,
    DropdownModule,
    InputNumberModule
  ],
  declarations: [HomestayComponent]
})
export class HomestayModule { }

 

Homestay-routing.module.ts

 import { HomestayComponent } from './homestay.component';
import { HomeComponent } from './home/home.component';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

export const Homestayroutes: Routes = [
  {path: '', redirectTo: 'index', pathMatch: 'full'},
  {path: 'index', component: HomestayComponent},
];

 

admin-layout.module.ts

 import { CategoryComponent } from './../../category/category.component';
import { AccessoriesComponent } from './../../accessories/accessories.component';
import { ExtensionComponent } from './../../extension/extension.component';
import { HomestayMangeComponent } from './../../homestay-mange/homestay-mange.component';
import { UserListPipe } from './../../users-list/user-list.pipe';
import { RoomManagePipe } from './../../room-manage/room-manage.pipe';
import { BankManageComponent } from './../../bank-manage/bank-manage.component';
import { UsersComponent } from './../../users/users.component';
import { UsersListComponent } from './../../users-list/users-list.component';
import { UsersManageComponent } from './../../users-manage/users-manage.component';
import { BookingListComponent } from '../../booking-list/booking-list.component';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AdminLayoutRoutes } from './admin-layout.routing';
import { DashboardComponent } from '../../dashboard/dashboard.component';
import { RoomManageComponent } from '../../room-manage/room-manage.component';
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
import { MatRippleModule } from '@angular/material/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatSelectModule } from '@angular/material/select';
import { TableModule } from 'primeng/table';
import { ButtonModule } from 'primeng/button'
import { DialogModule } from 'primeng/dialog';
import { InputMaskModule } from 'primeng/inputmask';
import { InputTextModule } from 'primeng/inputtext';
import { DropdownModule } from 'primeng/dropdown';
import { RadioButtonModule } from 'primeng/radiobutton';
import { FileUploadModule } from 'primeng/fileupload';
import { InputNumberModule } from 'primeng/inputnumber';
import { ToastModule } from 'primeng/toast';
import { InputTextareaModule } from 'primeng/inputtextarea';
import { CheckboxModule } from 'primeng/checkbox';
import { VirtualScrollerModule } from 'primeng/virtualscroller';
import { CalendarModule } from 'primeng/calendar';
import { SplitButtonModule } from 'primeng/splitbutton';

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(AdminLayoutRoutes),
    FormsModule,
    ReactiveFormsModule,
    MatButtonModule,
    MatRippleModule,
    MatFormFieldModule,
    MatInputModule,
    MatSelectModule,
    MatTooltipModule,
    TableModule,
    ButtonModule,
    DialogModule,
    InputMaskModule,
    InputTextModule,
    DropdownModule,
    RadioButtonModule,
    FileUploadModule,
    InputNumberModule,
    ToastModule,
    InputTextareaModule,
    CheckboxModule,
    VirtualScrollerModule,
    CalendarModule,
    SplitButtonModule
  ],
  declarations: [
    DashboardComponent,
    BookingListComponent,
    RoomManageComponent,
    UsersComponent,
    UsersListComponent,
    UsersManageComponent,
    BankManageComponent,
    HomestayMangeComponent,
    RoomManagePipe,
    UserListPipe,
    ExtensionComponent,
    AccessoriesComponent,
    CategoryComponent,
  ]
})

export class AdminLayoutModule {}

 

admin-layout.routing.ts

 import { CategoryComponent } from './../../category/category.component';
import { AccessoriesComponent } from './../../accessories/accessories.component';
import { ExtensionComponent } from './../../extension/extension.component';
import { HomestayMangeComponent } from './../../homestay-mange/homestay-mange.component';
import { BankManageComponent } from './../../bank-manage/bank-manage.component';
import { UsersListComponent } from './../../users-list/users-list.component';
import { UsersComponent } from './../../users/users.component';
import { UsersManageComponent } from './../../users-manage/users-manage.component';
import { BookingListComponent } from '../../booking-list/booking-list.component';
import { Routes } from '@angular/router';

import { DashboardComponent } from '../../dashboard/dashboard.component';
import { RoomManageComponent } from '../../room-manage/room-manage.component';

export const AdminLayoutRoutes: Routes = [
  { path: 'dashboard', component: DashboardComponent },
  { path: 'booking-list', component: BookingListComponent },
  { path: 'room-manage', component: RoomManageComponent },
  {
    path: 'users',
    component: UsersComponent,
    children: [
      { path: '', component: UsersListComponent, outlet: 'users' },
      { path: 'users-list', component: UsersListComponent, outlet: 'users' },
      {
        path: 'users-manage',
        component: UsersManageComponent,
        outlet: 'users',
      },
      {
        path: 'users-manage/:id',
        component: UsersManageComponent,
        outlet: 'users',
      },
    ],
  },
  { path: 'homestay', component: HomestayMangeComponent },
  { path: 'bank', component: BankManageComponent },
  {
    path: 'extension',
    component: ExtensionComponent,
    children: [
      { path: '', component: AccessoriesComponent, outlet: 'extension' },
      { path: 'accessories', component: AccessoriesComponent, outlet: 'extension' },
      { path: 'category', component: CategoryComponent, outlet: 'extension' },
    ],
  },
];

 

Когда я использую AdminLayoutModule это, работает, но когда мне нужно использовать HomestayModule это сообщение об ошибке отправки
, и я уже импортирую RoutesModule.forChild в 2 модуля и импортирую RoutesModule.forRoot в appModule

Я понял. Я забыл удалить AppRoutingModule в Homestay.module.ts

Спасибо.