web-dev-qa-db-ger.com

Lazy Loading BrowserModule wurde bereits geladen

Ich versuche, Lazy Loading zu implementieren, bekomme aber folgende Fehlermeldung **

FEHLER Fehler: Nicht erfasst (im Versprechen): Fehler: BrowserModule hat bereits geladen worden Wenn Sie auf allgemeine Anweisungen wie NgIf und .__ zugreifen müssen. NgFür ein faul geladenes Modul, importieren Sie stattdessen CommonModule.

**

Brauchen Sie Hilfe zu diesem Thema ... Hier sind meine Module 

  1. Gemeinsame MOdule
@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.Einstellungsmodul

 @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. App-Routing-Modul
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.AppModul

@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 { }
angulartypescriptangular2-routinglazy-loadingangular2-modules
7
Er Sushil

Importieren Sie BrowserAnimationsModule und HttpModule nur einmal (entweder in Ihrem Root-Modul oder einem Kernmodul).

18
Jota.Toledo

Ich bekam auch den gleichen Fehler und endlich, nach ein bisschen Mühe, konnte ich ihn beheben. 

Importieren Sie die genannten Module nur einmal (nur im App-Modul):

BrowserModule, BrowserAnimationsModule, LazyLoadImageModule (falls verwendet), CarouselModule (falls verwendet), InfiniteScrollModule (falls verwendet), HttpModule (falls verwendet)

3
user9339378

Dieser Fehler kann auftreten, wenn Sie BrowseModule auch in einigen child.app module.ts importiert haben. Stellen Sie sicher, dass Sie CommonModule in alle Module außer app.module importieren, da es Browser-Module hat.

2
Fatema Saifee

Ich hatte das gleiche Problem und Jota.Toledo gab die richtige Antwort und ich möchte nur das erweitern: Bitte checken Sie in Shared Module alle Module ein, die damit zusammenhängen 

@ Winkel-/Plattform-Browser/Animationen

und verschieben Sie diese Module in app.module.ts

1
Vitaliy Bilous

Beziehen Sie alle allgemeinen Module nur in die übergeordnete Komponente (oder nur in appModule) ein. Schließen Sie im Kindermodul nur Kindspezifische Module ein.

Möglicherweise müssen Sie in Ihren untergeordneten Modulen und übergeordneten Modulen auch schemas: [NO_ERRORS_SCHEMA], hinzufügen

0
Shishir Arora

Wenn Sie mehrere Module verwenden, verwenden Sie das Modul Browser nur einmal in Ihrem App-Modul oder ein benutzerdefiniertes Modul und verwenden Sie CommonModule aus @angular/common in benutzerdefinierten Modulen. 

Ich habe den gleichen Fehler erhalten, ich habe versucht, Komponenten, Anweisungen, Pipes in mehreren Komponenten/Modulen wiederzuverwenden. Stattdessen habe ich alle wiederverwendbaren Komponenten in ein Kernmodul importiert und das Kernmodul in mehrere Komponenten/Module importiert.

0
Chetan Birajdar
@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 { }

Wenn wir BrowserModule in einem anderen Modul als app module(Duplicate) deklarieren, wird dieser Fehler auftreten. Wenn wir 10 Module oder Plugins im In-App-Modul importieren, müssen wir zuerst BrowserModule oben importieren und in decorates (import:[BrowserModule ]) oben deklarieren 

0
Brahmmeswara Rao Palepu

In meinem Fall hatte ich ein gemeinsames Modul, das BrowserAnimationModule importierte. Ich habe ein freigegebenes Modul in mein Stammmodul importiert. Um diesen Fehler zu beheben, entfernen Sie alle Importe von BrowserAnimationModule aus allen Modulen und fügen Sie sie dem Stammmodul hinzu.

imports: [
    AppRoutingModule,
    SharedModule,
    BrowserAnimationsModule
  ],
0
Santosh Kadam