延迟加载 BrowserModule 已经加载

Question

我正在尝试实现延迟加载但出现如下错误 **

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

Answer 1

如果您在某些 child.app module.ts 中也导入了 BrowseModule，则可能会发生此错误。请确保在 app.module 以外的所有模块中导入 CommonModule，因为它有浏览器模块。

Answer 2

导入 BrowserModule, BrowserAnimationsModule、HttpModule 或 HttpClientModule 仅一次，最好在您的根模块中。

Answer 3

我也遇到了同样的错误，最后，经过一番努力，我能够修复它。

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

浏览器模块，浏览器动画模块， LazyLoadImageModule（如果使用它）， CarouselModule（如果使用它）， InfiniteScrollModule（如果使用它）， HttpModule（如果使用它）

Answer 4

我遇到了同样的问题，Jota.Toledo 给出了正确的答案，我只想扩展一下：请检查共享模块导入与 [= 相关的任何模块11=]

@angular/platform-browser/animations

并将这些模块移动到 app.module.ts

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

如果我们在 app module(Duplicate) 以外的任何模块中声明 BrowserModule，就会出现此错误。在应用程序模块中如果我们导入 10 个模块或插件，首先我们必须在顶部导入 BrowserModule 并在顶部声明 decorates (import:[BrowserModule ])

Answer 6

如果您使用多个模块，请在您的应用程序模块或某些自定义模块中仅使用一次 Browser 模块，并在自定义模块中使用 @angular/common 中的 CommonModule。

我遇到了同样的错误，我试图在多个 components/modules 中重用组件、指令和管道。相反，我在核心模块中导入了所有可重用组件，并在多个 components/modules.

中导入了核心模块

Answer 7

在我的例子中，我共享了导入 BrowserAnimationModule 的模块。我在我的根模块中导入共享模块。要解决此错误，请从所有模块中删除 BrowserAnimationModule 的所有导入并将其添加到根模块。

imports: [
    AppRoutingModule,
    SharedModule,
    BrowserAnimationsModule
  ],

Answer 8

我通过从共享模块中删除 BreadcrumbsModule 解决了这个问题。

Answer 9

我是这样修复的：

我添加到项目中的惰性模块也包含 BrowserModule。

那是我从模块中删除它的时候，然后它起作用了。

Answer 10

您需要检查应用程序的其他部分是否正在调用或导入 BrowserModule。有些库使用 BrowserModule，这样做会破坏 BrowserModule。

Answer 11

注意：您必须在 root 中有 a“BrowserModule”并且必须有 的“CommonModule”每个个子组件

Answer 12

同样的问题我也卡了2天，终于解决了！让我分享一下我的经验，我已经为 common components 创建了自定义外部库。我在 azure devOps artifacts 上部署了它。当我安装它时，我的项目按预期工作正常。现在，当我尝试在 app-routing-module.ts 中将某些模块导入为 loadChildern 时。我遇到了同样的错误

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.

我的项目配置没问题，我犯了一个多么微小的错误，我在我的外部库中导入了 BrowserModule 和 CommonModule，所以我只是从中删除了 BrowserModule那，它工作正常，没有任何问题或错误

我学到了什么

BrowserModule 是一个根模块，我们必须在 AppModule 中的整个项目中导入一次它，我们可以在其他模块中使用 CommonModule。我们不能同时使用模块 BrowserModule 和 CommonModule。

这是我从这次经历中学到的，如果我没理解，请告诉我正确的！

延迟加载 BrowserModule 已经加载

Lazy Loading BrowserModule has already been loaded

lazy-loading

typescript

angular2-routing

angular2-modules

angular