延遲加載 BrowserModule 已經加載

Question

我正在嘗試實現延遲加載，但出現如下錯誤**

ERROR 錯誤：未捕獲（承諾中）：錯誤：BrowserModule 已加載。 如果您需要從延遲加載的模塊中訪問常用指令，例如 NgIf 和 NgFor，請改為導入 CommonModule。

**

需要幫助。 這是我的模塊

1. 共享模塊

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

4. 應用路由模塊

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.App模塊

@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

僅導入BrowserModule, BrowserAnimationsModule 、 HttpModule或HttpClientModule一次，最好在您的根模塊中。

Answer 2

我也遇到了同樣的錯誤，最后，經過一點點努力，我能夠修復它。

僅導入這些提到的模塊一次（僅在 app-module 中）：

BrowserModule、BrowserAnimationsModule、LazyLoadImageModule（如果使用）、CarouselModule（如果使用）、InfiniteScrollModule（如果使用）、HttpModule（如果使用）

Answer 3

我遇到了同樣的問題， Jota.Toledo給出了正確的答案，我只想擴展它：請檢查共享模塊導入與

@angular/平台瀏覽器/動畫

並將這些模塊移動到 app.module.ts

Answer 4

如果您也在某些 child.app module.ts 中導入了 BrowseModule，則可能會發生此錯誤。 請確保在除 app.module之外的所有模塊中導入CommonModule ，因為它具有瀏覽器模塊。

Answer 5

就我而言，我共享了導入 BrowserAnimationModule 的模塊。 我在我的根模塊中導入共享模塊。 要解決此錯誤，請從所有模塊中刪除 BrowserAnimationModule 的所有導入並將其添加到根模塊。

imports: [
    AppRoutingModule,
    SharedModule,
    BrowserAnimationsModule
  ],

Answer 6

您需要檢查應用程序的其他部分是否正在調用或導入 BrowserModule。 有些庫使用 BrowserModule，這樣做會破壞 BrowserModule。

Answer 7

注意：您必須在根目錄中有一個“BrowserModule”，並且每個子組件必須有一個“CommonModule”

Answer 8

在同一個問題中，我也被卡住了 2 天，但終於解決了，讓我分享一下我的經驗，我創建了自定義外部庫以用於common components 。 我將它部署在azure devOps artifacts上。 當我安裝它我的項目時，它按預期工作。 現在，當我嘗試在app-routing-module.ts中將某些模塊作為loadChildern導入時。 我收到同樣的錯誤

ERROR 錯誤：未捕獲（承諾中）：錯誤：BrowserModule 已加載。 如果您需要從延遲加載的模塊中訪問常用指令，例如 NgIf 和 NgFor，請改為導入 CommonModule。

我的項目配置是好的，我犯了一個多么小的錯誤，即我在我的外部庫中導入了BrowserModule和CommonModule ，所以我只是從中刪除了BrowserModule ，它工作正常，沒有任何問題或錯誤

我學到

BrowserModule是一個根模塊，我們必須在CommonModule AppModule 我們不能同時使用模塊BrowserModule和CommonModule 。

這是我從這次經歷中學到的，如果我錯過了理解，請告訴我正確的！

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

如果我們在 app module(Duplicate)以外的任何模塊中聲明BrowserModule ，則會出現此錯誤。 In app 模塊如果我們導入 10 個模塊或插件，首先我們必須在頂部導入BrowserModule並在頂部聲明裝飾(import:[BrowserModule ])

Answer 10

僅包含父組件（或僅 appModule）中的所有公共模塊。 在子模塊中，僅包含子特定模塊。

此外，您可能需要在子模塊和父模塊中添加schemas: [NO_ERRORS_SCHEMA],

Answer 11

如果您使用多個模塊，請在您的應用程序模塊或某些自定義模塊中僅使用Browser模塊一次，並在自定義模塊中使用來自@angular/common CommonModule 。

我遇到了同樣的錯誤，我試圖在多個組件/模塊中重用組件、指令、管道。 相反，我在核心模塊中導入了所有可重用組件，並在多個組件/模塊中導入了核心模塊。

Answer 12

我通過從共享模塊中刪除 BreadcrumbsModule 解決了這個問題。

Answer 13

這是我修復它的方式：

我添加到我的項目中的惰性模塊也包含BrowserModule 。

那是我從模塊中刪除它的時候，然后它就起作用了。

Answer 14

我必須從任何子組件導入中移動BrowserAnimationsModule