web-dev-qa-db-ja.com

遅延読み込みBrowserModuleは既に読み込まれています

遅延読み込みを実装しようとしていますが、次のようにエラーが発生します**

エラーエラー：キャッチされません（約束）：エラー：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.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 { }
  1. アプリルーティングモジュール
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 { }
angulartypescriptangular2-routinglazy-loadingangular2-modules
19
Er Sushil

インポートBrowserModule,BrowserAnimationsModule、HttpModule、またはHttpClientModule一度だけ、できればルートモジュールで。

49
Jota.Toledo

私も同じエラーを受け取り、最終的に少し苦労した後、修正することができました。

これらの言及されたモジュールを一度だけインポートします（app-moduleのみ）：

BrowserModule、BrowserAnimationsModule、LazyLoadImageModule（使用する場合）、CarouselModule（使用する場合）、InfiniteScrollModule（使用する場合）、HttpModule（使用する場合）

4
user9339378

このエラーは、child.app module.tsにBrowseModuleをインポートした場合にも発生する可能性があります。ブラウザモジュールがあるため、app.module以外のすべてのモジュールでCommonModuleをインポートしてください。

3
Fatema Saifee

私は同じ問題を抱えていましたJota.Toledoは正しい答えを与え、それを拡張したいだけです：共有モジュールのインポートをチェックしてください

@ angular/platform-b​​rowser/animations

それらのモジュールをapp.module.tsに移動します

1
Vitaliy Bilous

親コンポーネントのみ（またはappModuleのみ）にすべての共通モジュールを含めます。子モジュールには、子固有のモジュールのみを含めます。

また、子モジュールと親モジュールにschemas: [NO_ERRORS_SCHEMA],を追加する必要があるかもしれません

0
Shishir Arora

複数のモジュールを使用している場合は、アプリモジュールまたはカスタムモジュールでBrowserモジュールを1回だけ使用し、カスタムモジュールで@angular/commonのCommonModuleを使用します。

同じエラーが発生しました。複数のコンポーネント/モジュールでコンポーネント、ディレクティブ、パイプを再利用しようとしました。代わりに、すべての再利用可能なコンポーネントをコアモジュールにインポートし、コアモジュールを複数のコンポーネント/モジュールにインポートしました。

0
Chetan Birajdar
_@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個のモジュールまたはプラグインをインポートする場合、In appモジュールでは、最初にBrowserModuleをインポートし、上部にin decorates _(import:[BrowserModule ])_を宣言する必要があります

0
Brahmmeswara Rao Palepu

私の場合、BrowserAnimationModuleをインポートする共有モジュールがありました。ルートモジュールに共有モジュールをインポートしていました。このエラーを解決するには、BrowserAnimationModuleのすべてのインポートをすべてのモジュールから削除し、ルートモジュールに追加します。

imports: [
    AppRoutingModule,
    SharedModule,
    BrowserAnimationsModule
  ],
0
Santosh Kadam