在懒惰模块中导入时，从Angular Universal Build中排除模块

Question

我正在使用ngx-dropzone-wrapper，并且仅将其导入到我的延迟加载模块之一中（即，未将其导入到我的app.module中），我想将其作为指令导入从服务器构建中删除仅限客户的dropzone。

我最初的想法是创建一个具有虚拟组件和伪指令的伪模块，该伪指令使用相同的选择器和组件名称，并将其导入到我的app.server.module中，以希望它能覆盖ngx-dropzone-wrapper模块

但是这不起作用，我只是在服务器版本中同时使用了两个模块。我猜这是因为ngx-dropzone-wrapper仅导入了延迟加载的模块中。

为清楚起见，这是我的虚拟模块。

@NgModule({
  declarations: [DropzoneComponent, DropzoneDirective],
  exports: [DropzoneComponent, DropzoneDirective],
  imports: [CommonModule]
})
export class DropzoneModule {}

甚至尝试使用forRoot

export class DropzoneModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: DropzoneModule
    };
  }
}

虚拟组件

@Component({
  selector: 'dropzone',
  exportAs: 'ngxDropzone',
  templateUrl: './dropzone.component.html',
  styleUrls: ['./dropzone.component.scss']
})
export class DropzoneComponent implements OnInit {
  @Input() disabled = false;
  @Input() config?: any;
  @Input() message = 'Click or drag files to upload';
  @Input() placeholder = '';
  @Input() useDropzoneClass = true;

  @ViewChild(DropzoneDirective) directiveRef?: DropzoneDirective;

  @Output('init') DZ_INIT = new EventEmitter<any>();
  @Output('error') DZ_ERROR = new EventEmitter<any>();
  @Output('success') DZ_SUCCESS = new EventEmitter<any>();
  @Output('sending') DZ_SENDING = new EventEmitter<any>();
  @Output('canceled') DZ_CANCELED = new EventEmitter<any>();
  @Output('complete') DZ_COMPLETE = new EventEmitter<any>();
  @Output('processing') DZ_PROCESSING = new EventEmitter<any>();
  @Output('drop') DZ_DROP = new EventEmitter<any>();
  @Output('dragStart') DZ_DRAGSTART = new EventEmitter<any>();
  @Output('dragEnd') DZ_DRAGEND = new EventEmitter<any>();
  @Output('dragEnter') DZ_DRAGENTER = new EventEmitter<any>();
  @Output('dragOver') DZ_DRAGOVER = new EventEmitter<any>();
  @Output('dragLeave') DZ_DRAGLEAVE = new EventEmitter<any>();
  @Output('thumbnail') DZ_THUMBNAIL = new EventEmitter<any>();
  @Output('addedFile') DZ_ADDEDFILE = new EventEmitter<any>();
  @Output('removedFile') DZ_REMOVEDFILE = new EventEmitter<any>();
  @Output('uploadProgress') DZ_UPLOADPROGRESS = new EventEmitter<any>();
  @Output('maxFilesReached') DZ_MAXFILESREACHED = new EventEmitter<any>();
  @Output('maxFilesExceeded') DZ_MAXFILESEXCEEDED = new EventEmitter<any>();
  @Output('successMultiple') DZ_SUCCESSMULTIPLE = new EventEmitter<any>();
  @Output('sendingMultiple') DZ_SENDINGMULTIPLE = new EventEmitter<any>();
  @Output('canceledMultiple') DZ_CANCELEDMULTIPLE = new EventEmitter<any>();
  @Output('completeMultiple') DZ_COMPLETEMULTIPLE = new EventEmitter<any>();
  @Output('processingMultiple') DZ_PROCESSINGMULTIPLE = new EventEmitter<any>();
  @Output('reset') DZ_RESET = new EventEmitter<any>();
  @Output('queueComplete') DZ_QUEUECOMPLETE = new EventEmitter<any>();
  @Output('totalUploadProgress') DZ_TOTALUPLOADPROGRESS = new EventEmitter<
    any
  >();
  constructor() {}

  ngOnInit() {}
}

虚拟指令

@Directive({
  selector: '[dropzone]'
})
export class DropzoneDirective {
  @Input() disabled = false;
  @Input('dropzone') config?: any;

  @Output('init') DZ_INIT = new EventEmitter<any>();  
  @Output('error') DZ_ERROR = new EventEmitter<any>(); 
  @Output('success') DZ_SUCCESS = new EventEmitter<any>(); 
  @Output('sending') DZ_SENDING = new EventEmitter<any>(); 
  @Output('canceled') DZ_CANCELED = new EventEmitter<any>();
  @Output('complete') DZ_COMPLETE = new EventEmitter<any>(); 
  @Output('processing') DZ_PROCESSING = new EventEmitter<any>();
  @Output('drop') DZ_DROP = new EventEmitter<any>();
  @Output('dragStart') DZ_DRAGSTART = new EventEmitter<any>(); 
  @Output('dragEnd') DZ_DRAGEND = new EventEmitter<any>();
  @Output('dragEnter') DZ_DRAGENTER = new EventEmitter<any>();
  @Output('dragOver') DZ_DRAGOVER = new EventEmitter<any>();
  @Output('dragLeave') DZ_DRAGLEAVE = new EventEmitter<any>();
  @Output('thumbnail') DZ_THUMBNAIL = new EventEmitter<any>();
  @Output('addedFile') DZ_ADDEDFILE = new EventEmitter<any>();
  @Output('removedFile') DZ_REMOVEDFILE = new EventEmitter<any>();
  @Output('uploadProgress') DZ_UPLOADPROGRESS = new EventEmitter<any>();
  @Output('maxFilesReached') DZ_MAXFILESREACHED = new EventEmitter<any>();
  @Output('maxFilesExceeded') DZ_MAXFILESEXCEEDED = new EventEmitter<any>();
  @Output('successMultiple') DZ_SUCCESSMULTIPLE = new EventEmitter<any>();
  @Output('sendingMultiple') DZ_SENDINGMULTIPLE = new EventEmitter<any>(); 
  @Output('canceledMultiple') DZ_CANCELEDMULTIPLE = new EventEmitter<any>();
  @Output('completeMultiple') DZ_COMPLETEMULTIPLE = new EventEmitter<any>();
  @Output('processingMultiple') DZ_PROCESSINGMULTIPLE = new EventEmitter<any>();
  @Output('reset') DZ_RESET = new EventEmitter<any>();
  @Output('queueComplete') DZ_QUEUECOMPLETE = new EventEmitter<any>();
  @Output('totalUploadProgress') DZ_TOTALUPLOADPROGRESS = new EventEmitter<
    any
  >();
  constructor() {}
}