延迟加载BrowserModule已经加载

我想实现延迟加载，但得到的错误如下 **延迟加载BrowserModule已经加载

ERROR Error: Uncaught (in promise): Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.

需要帮助这一点。这里是我的模块

共享模块

@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 { }

应用路由 - 模块

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 { }

来源

2017-08-31 Er Sushil

你是否在初始加载'index.html'时或者当你导航到'/ settings'时出现这个错误？ –

@GünterZöchbauer导航到“/ settings” –

你确定所有涉及的模块（除AppModule'）的** none **都导入BrowserModule吗？ –

导入BrowserAnimationsModule和HttpModule只有一次（无论是在你的根模块或核心模块）。

来源

2017-08-31 10:29:21

如果你已经在一些child.app module.ts进口BrowseModule，也会出现此错误。请确保在除app.module以外的所有模块中导入CommonModule，因为它具有浏览器模块。

来源

2017-08-31 07:54:58

您可以从'@ angular/common'导入CommonModule –

仍然收到相同的错误，并且您只能检查AppModule我导入了BrowseModule –

我也得到了同样的错误，最后经过一点点的努力，我能够解决它。

导入这些提到的模块仅一次（在只应用模块）：

BrowserModule， BrowserAnimationsModule， LazyLoadImageModule（如果使用的话）， CarouselModule（如果使用的话）， InfiniteScrollModule（如果使用的话）， HttpModule（如果使用它）

来源

2018-02-09 16:20:15 user9339378

延迟加载BrowserModule已经加载

回答

相关问题