我正在尝试实现延迟加载，但出现如下错误 **
错误错误：未捕获（承诺）：错误：BrowserModule 已经 已加载。如果您需要访问常见指令，例如 NgIf 和 NgFor 来自延迟加载的模块，请导入 CommonModule。
**
需要帮助。 这是我的模块
@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.设置模块
@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.应用程序模块
@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 { }
导入
BrowserModule,BrowserAnimationsModuleHttpModuleHttpClientModule我遇到了同样的问题，Jota.Toledo给出了正确的答案，我只想扩展：请检查共享模块导入与
相关的任何模块@Angular/平台浏览器/动画
并将这些模块移至 app.module.ts
我也遇到了同样的错误，最后，经过一番努力，我能够修复它。
仅导入这些提到的模块一次（仅在应用程序模块中）：
浏览器模块， 浏览器动画模块， LazyLoadImageModule（如果使用它）， CarouselModule（如果使用它）， InfiniteScrollModule（如果使用它）， HttpModule（如果使用它）
如果您还在某些 child.app module.ts 中导入了 BrowseModule，则可能会发生此错误。请确保在除 app.module 之外的所有模块中导入 CommonModule，因为它具有浏览器模块。
就我而言，我有一个正在导入 BrowserAnimationModule 的共享模块。我正在根模块中导入共享模块。要解决此错误，请从所有模块中删除所有 BrowserAnimationModule 的导入并将其添加到根模块中。
imports: [
AppRoutingModule,
SharedModule,
BrowserAnimationsModule
],
我必须从任何子组件中移动 BrowserAnimationsModule imports
@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
BrowserModulemodule(Duplicate)BrowserModule(import:[BrowserModule ])如果您使用多个模块，请在应用程序模块或某些自定义模块中仅使用一次
BrowserCommonModule@angular/common我遇到了同样的错误，我试图在多个组件/模块中重用组件、指令、管道。相反，我将所有可重用组件导入到核心模块中，并将核心模块导入到多个组件/模块中。
您需要检查应用程序的其他部分是否正在调用或导入 BrowserModule。有些库使用 BrowserModule，这样做会破坏 BrowserModule。
同样的问题我也被卡了两天，不过终于解决了！让我分享我的经验，我为了
common componentsazure devOps artifactsloadChildernapp-routing-module.ts错误错误：未捕获（承诺）：错误：BrowserModule 已加载。如果您需要从延迟加载的模块访问常见指令，例如 NgIf 和 NgFor，请改为导入 CommonModule。
我的项目配置是好的，我犯了一个多么小的错误，那就是我在外部库中导入了
BrowserModuleCommonModuleBrowserModule我学到了什么
BrowserModuleAppModuleCommonModuleBrowserModuleCommonModule这是我从这次经历中学到的，如果我不明白请告诉我正确的！
我通过从共享模块中删除 BreadcrumbsModule 解决了这个问题。
这就是我修复它的方法：
我添加到项目中的惰性模块也包含
BrowserModule当我将其从模块中删除时，它就起作用了。
注意：root中必须有a“BrowserModule”，并且each子组件
必须有“CommonModule”IDE自动导入！有了独立的组件，就成为了开发领域的新问题。如果您使用独立组件，则意味着您的项目中只有一个模块 - 它就是 AppModule。某些 IDE（例如 Webstorm）在创建 Pipe/Component/... 时只需在 AppModule 中声明它，然后 IDE 将创建的 Pipe/Component/... 添加为独立组件的导入。正如您所理解的，AppModule 会自动第二次带来 BrowserModule。解决方案，只需使您的 Pipe/Component/... 独立，删除所有导入/导出，从导入部分删除 AppModule。