angulartypescriptlazy-loadingangular-cdkangular-dragdrop

angular cdk drag and drop not working in lazy-loading


I Switched to lazy-loading feature when it came out on angular 7, before that, the cdk drag and drop used to work, now its broken.

there are some shared modules that I use in my code for centralization of modules, so for example whenever I need module A,B,C , I only import Module D which itself imports these mentioned modules.

I tried Importing DragDropModule located in @angular/cdk/drag-drop in one of these shared modules, It didnt work.

I also double checked that these modules are imported in everywhere.

note that I made sure the shared module is exported too.

The Shared Module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import {DragDropModule} from '@angular/cdk/drag-drop';


@NgModule({
  declarations: [],
  imports: [DragDropModule, CommonModule],
  exports : [DragDropModule]
})
export class DragDropSharedModule {}

Inside Other Shared Moudle

import {DragDropSharedModule} from './core-shared/drag-drop.module'

@NgModule({
  declarations: [
    NavbarComponent,
    AppComponent,
    // TimeAgoPipe,
    RmSetTextComponent,
    // ToggleComponent,
    KeysPipe,
    TimeAgoPipe
    // LoadingComponent
    ////////////// AclControlComponent,
    ///////////// AclGroupListComponent,
    ////////////////////// AclPermissionComponent,
    ///////////// SelectedItemsPipe

  ],
  imports: [
    // BrowserModule,
    ReactiveFormsModule,
    FormsModule,
    Ng2FileInputModule.forRoot(),
    Ng2ImgFallbackModule,
    CommonModule,
    HttpClientModule,
    // DragDropModule,
    ScrollingModule,
    NotFountPageModule,
    RmTableModule,
    ToggleModule,
    DragDropSharedModule
  ]

Solution

  • SOLVED

    I didn't import the Drag and Drop modules in one of the shared modules