Ошибка модуля браузера для NgxDatetimeRangePickerModule

Question

Привет, мое приложение работало нормально, пока я не добавил NgxDatetimeRangePickerModule. Как только я добавил его в свой общий модуль, я получаю BrowserModule, уже загруженная ошибка. Модуль Borwser присутствует только в app.module, а не в каком-либо модуле. В чем может быть проблема.

Ошибка:

vendor.js:77185 ERROR Error: Uncaught (in promise): Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.
Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.

App.module.ts

import { NgModule, ApplicationModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';


import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgHttpLoaderModule } from 'ng-http-loader';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

// 3rd party module
import { NgxDatetimeRangePickerModule } from 'ngx-datetime-range-picker';


// import { Cardscomponent } from './cards/cards.component';

import { NotificationToastComponent } from './_shared/notification-toast/notification-toast.component';
import { LoginComponent } from './login/login.component';
import { AuthGuard } from './_services/auth.guard';
import { AuthInterceptor } from './_services/auth.interceptor';
import { ErrorInterceptor } from './_services/error.interceptor';
import { SharedModule } from './_shared/shared.module';


@NgModule({
  declarations: [
    AppComponent,
    NotificationToastComponent,
    LoginComponent,
  ],
  imports: [
    SharedModule,
    BrowserModule,
    BrowserAnimationsModule,
    ApplicationModule,
    FormsModule,
    ReactiveFormsModule,
    AppRoutingModule,
    HttpClientModule,
    NgHttpLoaderModule.forRoot(),
    NgbModule,

  ],
  providers: [
    AuthGuard,
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }
  ],
  entryComponents: [
    NotificationToastComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Мой общий модуль:

import { NgModule } from '@angular/core';
import { FilterDataPipe } from '../_pipes/filter-data.pipe';
import { AngularMaterialModule } from '../angular-material.module';
import { CommonModule } from '@angular/common';
import { AngularKendoModule } from '../angular-kendo.module';
import { NgxDatetimeRangePickerModule } from 'ngx-datetime-range-picker';
import { MustMatchDirective } from '../_helpers/must-match.directive';

@NgModule({
  imports:[
    CommonModule,
    AngularMaterialModule,
    AngularKendoModule,
  ],
  declarations: [
    FilterDataPipe,
    MustMatchDirective
  ],
  exports: [
    CommonModule,
    FilterDataPipe,
    AngularMaterialModule,
    MustMatchDirective,AngularKendoModule,
    NgxDatetimeRangePickerModule
  ]
})
export class SharedModule {}

Мой детский модуль:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Cardscomponent } from './cards.component';
import { SharedModule } from '../_shared/shared.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { CardsRoutingModule } from './cards-routing.module';
import { CardDetailsComponent } from './card-details/card-details.component';
import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
@NgModule({
  imports: [
   CommonModule,
    SharedModule,
    FormsModule,
    ReactiveFormsModule,
    CardsRoutingModule,
    NgbModule,
     NgMultiSelectDropDownModule.forRoot(),

  ],
  declarations: [Cardscomponent,CardDetailsComponent]
})
export class CardsModule { }

Answer 1

Удалите NgxDatetimeRangePickerModule из app.module и переместите его в общий модуль. В разделяемом модуле импорта NgxDatetimeRangePickerModule.for Root () внутри раздела импорта.

Спасибо Рахул Токасе