Lazy Loading BrowserModule уже загружен

Я пытаюсь реализовать ленивую загрузку, но получаю ошибку, следуя **

Ошибка ERROR: нечистота (в обещании): ошибка: BrowserModule уже загружен. Если вам нужен доступ к общим директивам, таким как NgIf и NgFor от ленивого загруженного модуля, вместо этого импортируйте CommonModule.

**

Нужна помощь по этому поводу. Вот мои модули

  1. Общий расписание
@NgModule({

  declarations: [TimePipe],
  providers: [
    EmsEmployeeService,
    EmsDesignationService,
    EmsOrganizationService,
    EmsAuthService,
    AmsEmployeeService,
    AmsShiftService,
    ValidatorService,
    AmsLeaveService,
    AmsAttendanceService,
    AmsDeviceService,
    AmsOrganizationService,
    AmsAlertService,
    AmsHolidayService,
    AutoCompleteService,
    AmsTimelogsService,
    LocalStorageService
  ],
  imports: [
    HttpModule,
    ToastyModule.forRoot(),
    AgmCoreModule.forRoot({
      apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxx'
    }),
  ],
  exports: [
    FormsModule,
    HttpModule,
    BrowserAnimationsModule,
    RouterModule,
    MaterialModule,
    MdDatepickerModule,
    MdNativeDateModule,
    ToastyModule,
    FileUploadModule,
    NgxPaginationModule,
    NguiAutoCompleteModule,
    AgmCoreModule,
    TimePipe
  ]
})
export class SharedModule { }

2.SettingModule

 @NgModule({
  imports: [
    CommonModule,
    SharedModule,
    SettingsRoutingModule
  ],
  declarations: [
    SettingsComponent,
    ShiftsComponent,
    DevicesComponent,
    AlertsComponent,
    HolidaysComponent,
    AlterTypesComponent,
    AlterEditComponent,
    ShiftTypeNewComponent,
    DeviceLogsComponent,
    ChannelTypesComponent,
    ChannelTypeEditComponent
  ], exports: [
    SettingsComponent,
    ShiftsComponent,
    DevicesComponent,
    AlertsComponent,
    HolidaysComponent,
    AlterTypesComponent,
    AlterEditComponent,
    ShiftTypeNewComponent,
    DeviceLogsComponent,
    ChannelTypesComponent,
    ChannelTypeEditComponent,
  ]
})
export class SettingsModule { }

3.SettingRoutingModule

const settings_routes: Routes = [
  { path: '', redirectTo: 'shifts', pathMatch: 'full' },
  { path: 'shifts', component: ShiftsComponent },
  { path: 'shifts/new', component: ShiftTypeNewComponent },
  { path: 'shifts/edit/:id', component: ShiftTypeNewComponent },
  { path: 'devices', component: DevicesComponent },
  { path: 'deviceLogs', component: DeviceLogsComponent },
  { path: 'holidays', component: HolidaysComponent },
  { path: 'alerts', component: AlertsComponent },
  { path: 'alerts/types', component: AlterTypesComponent },
  { path: 'alerts/:id', component: AlterEditComponent },
  { path: 'channelTypes', component: ChannelTypesComponent },
  { path: 'channelTypes/:id', component: ChannelTypeEditComponent }
];


const routes: Routes = [
  { path: '', component: SettingsComponent, children: settings_routes }
];



@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class SettingsRoutingModule { }
  1. Приложение-маршрутизация-модуль
const attdendance_routes: Routes = [
  { path: '', redirectTo: 'daily', pathMatch: 'full' },
  { path: 'monthly', component: MonthlyComponent },
  { path: 'daily', component: DailyComponent },

  { path: 'daily/:empId', component: AttendanceDetailsComponent },
  { path: 'details/:empId', component: AttendanceDetailsComponent },
  { path: 'monthly/:empId', component: AttendanceDetailsComponent },
  { path: 'leaves/:empId', component: AttendanceDetailsComponent },

  { path: 'details/:empId/apply-leave', component: ApplyLeaveComponent },
  { path: 'daily/:empId/apply-leave', component: ApplyLeaveComponent },
  { path: 'daily/:empId/attendance-logs/:ofDate', component: AttendanceLogsComponent },
  { path: 'monthly/:empId/apply-leave', component: ApplyLeaveComponent },
  { path: 'leaves/:empId/apply-leave', component: ApplyLeaveComponent },
  { path: 'leaves/new/apply', component: ApplyLeaveComponent },

  { path: 'leaves', component: LeavesComponent },
  { path: 'leave-balances', component: LeaveBalancesComponent },
  { path: 'leave-balances/:empId', component: AttendanceDetailsComponent },
  { path: 'manage-leaves', component: ManageLeavesComponent },

];



const emp_routes: Routes = [
  { path: '', redirectTo: 'list', pathMatch: 'full' },
  { path: 'list', component: EmployeeListComponent },
  { path: 'list/:id', component: EmpEditComponent },
  { path: 'designations', component: DesignationsComponent }
];



const page_routes: Routes = [
  { path: '', redirectTo: 'attendances', pathMatch: 'full' },
  { path: 'employees', component: EmployeesComponent, children: emp_routes },
  { path: 'attendances', component: AttendancesComponent, children: attdendance_routes },

  { path: 'settings', loadChildren: './pages/settings/settings.module#SettingsModule' },
];

// main routes
const routes: Routes = [
  { path: '', redirectTo: 'pages', pathMatch: 'full' },
  { path: 'login', component: LoginComponent, canActivate: [LoginGuard] },
  { path: 'pages', component: PagesComponent, canActivate: [UserGuard], children: page_routes },
  { path: 'loginViaOrg', component: OrgLoginComponent },
  { path: 'download', component: AppDownloadComponent },
  { path: '**', redirectTo: 'pages' },
];

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

5.AppModule

@NgModule({

  declarations: [
    AppComponent,
    PagesComponent,
    LoginComponent,
    EmployeesComponent,
    OrgLoginComponent,
    EmployeeListComponent,
    EmpEditComponent,
    DayEventDialogComponent,
    AttendancesComponent,
    MonthlyComponent,
    AttendanceDetailsComponent,
    DailyComponent,
    DeviceDialogComponent,
    LeaveActionDialogComponent,
    LeavesComponent,
    LeaveBalancesComponent,
    ManageLeavesComponent,
    ApplyLeaveComponent,
    ConfirmDialogComponent,
    ResetPasswordDialogComponent,
    AppDownloadComponent,
    DesignationsComponent,
    AttendanceLogsComponent,
  ],

  entryComponents: [
    DayEventDialogComponent,
    DeviceDialogComponent,
    LeaveActionDialogComponent,
    ConfirmDialogComponent,
    ResetPasswordDialogComponent
  ],

  imports: [
    BrowserModule,
    // CommonModule,
    SharedModule,
    AppRoutingModule,
    // feature modules
    // SettingsModule
  ],

  providers: [
    LoginGuard, UserGuard,
  ],

  bootstrap: [AppComponent]
})
export class AppModule { }

ОТВЕТЫ

Ответ 1

Импортируйте BrowserModule, BrowserAnimationsModule, HttpModule или HttpClientModule только один раз, предпочтительно в корневой модуль.

Ответ 2

Я также получил ту же ошибку и, наконец, после небольшой битвы, я смог ее исправить.

Импортируйте указанные модули только один раз (только в приложении):

BrowserModule, BrowserAnimationsModule, LazyLoadImageModule (при его использовании), CarouselModule (при его использовании), InfiniteScrollModule (при его использовании), HttpModule (при его использовании)

Ответ 3

Эта ошибка может возникнуть, если вы импортировали BrowseModule в некоторый child.app module.ts. Убедитесь, что вы импортируете CommonModule во всех модулях, отличных от app.module, поскольку у него есть модули браузера.

Ответ 4

У меня была та же проблема, и Jota.Toledo дал правильный ответ, и я хочу только продлить это: пожалуйста, проверьте в модуле общего доступа все модули, связанные с

@угловой/платформа браузер/анимация

и переместите эти модули в app.module.ts

Ответ 5

@First Import BrowerModule and in imports also first include BrowserModule import:[BrowerModule ] 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Если мы объявим BrowserModule в любом модуле, кроме module(Duplicate) приложения module(Duplicate) эта ошибка возникнет. В модуле приложения, если мы импортируем 10 модулей или плагинов, сначала мы должны импортировать BrowserModule вверху и объявить в декорациях (import:[BrowserModule ]) вверху

Ответ 6

Включите все общие модули только в родительский компонент (или только в appModule). В дочерний модуль включайте только дочерние модули.

Также вам может понадобиться добавить schemas: [NO_ERRORS_SCHEMA], в ваши дочерние и родительские модули.

Ответ 7

Если вы используете несколько модулей, используйте модуль Browser только один раз в модуле приложения или в каком-либо пользовательском модуле и используйте CommonModule из @angular/common в пользовательских модулях.

Я получал ту же ошибку, я пытался повторно использовать компоненты, директивы, каналы в нескольких компонентах/модулях. Вместо этого я импортировал все повторно используемые компоненты в основной модуль и импортировал основной модуль в несколько компонентов/модулей.

Ответ 8

В моем случае у меня был общий модуль, который импортировал BrowserAnimationModule. Я импортировал общий модуль в мой корневой модуль. Чтобы устранить эту ошибку, удалите все импорты BrowserAnimationModule из всех модулей и добавьте его в корневой модуль.

imports: [
    AppRoutingModule,
    SharedModule,
    BrowserAnimationsModule
  ],