延迟加载 BrowserModule 已经加载答案

【问题标题】：Lazy Loading BrowserModule has already been loaded延迟加载 BrowserModule 已经加载
【发布时间】：2018-02-09 01:39:10
【问题描述】：

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

ERROR 错误：未捕获（承诺中）：错误：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.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 { }

【问题讨论】：

在index.html 的初始加载或导航到/settings 时是否收到此错误？
@GünterZöchbauer 在导航到“ /settings”时
您确定没有所有涉及的模块（AppModule 除外）导入BrowserModule？
@GünterZöchbauer 我找到了解决方案，我在 child.modules 中导入 BrowerAnimationModule
很高兴听到您可以让它工作 :) 感谢您的反馈！

标签： angular typescript angular2-routing lazy-loading angular2-modules

【解决方案1】：

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

【讨论】：

有效！补充一点：如果你同时使用BrowserAnimationsModule 和BrowserModule，它们应该被导入到同一个模块中。
另外，对于那些拥有 NoopAnimationsModule 的人，同样的规则也适用。我还必须移动那个模块。
这...这么多。我试图用 Angular CLI 9 生成一个惰性模块，输出错误是这个非描述性的“无法读取未定义的属性”错误。这个答案使我免于烧毁我的房间。我欠你 Jota。
我最后不得不导入AppRoutingModule，这解决了我的错误。但无法弄清楚其中的原因。
您先生拯救了我的一天。有我的赞成票。你能解释一下这是怎么必要的吗？

【解决方案2】：

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

仅将这些提到的模块导入一次（仅在 app-module 中）：

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

【讨论】：

这对我有用，但我现在应该如何使用 AppModule 之外的其他模块中的 CarouselModule 和其他模块？

【解决方案3】：

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

相关的模块

@angular/platform-browser/动画

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

【讨论】：

我没有在 app.module.ts 中导入 NoopAnimationsModule :)。立即解决了我的问题。

【解决方案4】：

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

【讨论】：

你可以从'@angular/common'导入CommonModule
仍然遇到同样的错误。而且你只能在 AppModule 中查看我已经导入了 BrowseModule
是的，我也是，只在应用模块中导入

【解决方案5】：

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

imports: [
    AppRoutingModule,
    SharedModule,
    BrowserAnimationsModule
  ],

【讨论】：

这对我有用，谢谢！

【解决方案6】：

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

【讨论】：

【解决方案7】：

注意：root中必须有一个“BrowserModule”，并且每个子组件必须有一个“CommonModule”

【讨论】：

【解决方案8】：

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

ERROR 错误：未捕获（承诺中）：错误：BrowserModule 已加载。如果您需要从延迟加载的模块中访问常用指令，例如 NgIf 和 NgFor，请改为导入 CommonModule。

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

我学到了什么

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

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

【讨论】：

【解决方案9】：

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

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

【讨论】：

1)如果我们在除app模块（重复）之外的任何模块中声明BrowserModule，则会出现此错误。在app模块中如果我们导入10个模块或插件，首先我们必须在顶部导入BrowserModule并声明在顶部装饰（导入：[BrowserModule]）
我已经用这个解释编辑了你的答案。请记住在可能的情况下编辑您的问题和答案，而不仅仅是评论:)

【解决方案10】：

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

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

【讨论】：

【解决方案11】：

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

【讨论】：

【解决方案12】：

这就是我修复它的方法：

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

当我从模块中删除它时，它就起作用了。

【讨论】：