Ответ 1
Импортируйте BrowserModule,
BrowserAnimationsModule
, HttpModule
или HttpClientModule
только один раз, предпочтительно в корневой модуль.
Я пытаюсь реализовать ленивую загрузку, но получаю ошибку, следуя **
Ошибка 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.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 { }
Импортируйте BrowserModule,
BrowserAnimationsModule
, HttpModule
или HttpClientModule
только один раз, предпочтительно в корневой модуль.
Я также получил ту же ошибку и, наконец, после небольшой битвы, я смог ее исправить.
Импортируйте указанные модули только один раз (только в приложении):
BrowserModule, BrowserAnimationsModule, LazyLoadImageModule (при его использовании), CarouselModule (при его использовании), InfiniteScrollModule (при его использовании), HttpModule (при его использовании)
Эта ошибка может возникнуть, если вы импортировали BrowseModule в некоторый child.app module.ts. Убедитесь, что вы импортируете CommonModule во всех модулях, отличных от app.module, поскольку у него есть модули браузера.
У меня была та же проблема, и Jota.Toledo дал правильный ответ, и я хочу только продлить это: пожалуйста, проверьте в модуле общего доступа все модули, связанные с
@угловой/платформа браузер/анимация
и переместите эти модули в app.module.ts
@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 { }
Если мы объявим BrowserModule
в любом модуле, кроме module(Duplicate)
приложения module(Duplicate)
эта ошибка возникнет. В модуле приложения, если мы импортируем 10 модулей или плагинов, сначала мы должны импортировать BrowserModule
вверху и объявить в декорациях (import:[BrowserModule ])
вверху
Включите все общие модули только в родительский компонент (или только в appModule). В дочерний модуль включайте только дочерние модули.
Также вам может понадобиться добавить schemas: [NO_ERRORS_SCHEMA],
в ваши дочерние и родительские модули.
Если вы используете несколько модулей, используйте модуль Browser
только один раз в модуле приложения или в каком-либо пользовательском модуле и используйте CommonModule
из @angular/common
в пользовательских модулях.
Я получал ту же ошибку, я пытался повторно использовать компоненты, директивы, каналы в нескольких компонентах/модулях. Вместо этого я импортировал все повторно используемые компоненты в основной модуль и импортировал основной модуль в несколько компонентов/модулей.
В моем случае у меня был общий модуль, который импортировал BrowserAnimationModule. Я импортировал общий модуль в мой корневой модуль. Чтобы устранить эту ошибку, удалите все импорты BrowserAnimationModule из всех модулей и добавьте его в корневой модуль.
imports: [
AppRoutingModule,
SharedModule,
BrowserAnimationsModule
],