Angular 2/5 declare directives in lazy modules

Question

I wants to reuse a directive in multiple modules. I can´t declare the directive in parentmodule because all childmodules are loaded by lazy loading. If i declare the same directive in both childmodules i get an error:

ERROR Error: Uncaught (in promise): Error: Type AddDirective is part of the declarations of 2 modules: SharedModule and GdprModule! Please consider moving AddDirective to a higher module that imports SharedModule and GdprModule. You can also create a new NgModule that exports and includes AddDirective then import that NgModule in SharedModule and GdprModule.

AddDirective is a simple directive which provide me ViewContainerRef which i need for dynamical components. I add them by following tutorial:

https://angular.io/guide/dynamic-component-loader

Do i have to create a own directive for every lazy module or is there any way to provide the same directive by shared module for example?

SharedModule:

    @NgModule({
      imports: [
        CommonModule
      ],
      declarations: [
         AddDirective
      ]
    })

LazyModule:

    import { SharedModule } from './pathToShared/sharaed.module';

    @NgModule({
     imports: [ SharedModule ],
     declarations: [ LazyComponent],
     entryComponents: [ DynamicalComponent ]
    })
    export class LazyModule { }

Answer 1

Create a shared module and add the directive it in and import shared module in app.module.ts

Answer 2

You can create shared module. Add the modules that are used multiple times and export them. for example

shared.module.ts

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

    import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
    import { AlertModule, TimepickerModule } from 'ngx-bootstrap';

    import { SweetAlertService } from './../sweetalert2.service';

    import { UnmaskDirective } from '../../directive/unmask.directive';
    import { FileUploadComponent } from '../file-upload/file-upload.component';

    @NgModule({
       imports: [
       CommonModule, NgbModule.forRoot(), AlertModule.forRoot(),TimepickerModule.forRoot(), FileUploadModule
      ],
      declarations: [UnmaskDirective, FileUploadComponent],
      providers: [SweetAlertService],
      exports: [
        NgbModule, AlertModule, TimepickerModule, UnmaskDirective, FileUploadComponent, FileUploadModule
      ]
    })
    export class SharedModule {
      static forRoot(): ModuleWithProviders {
        return {
          ngModule: SharedModule,
          providers: [SweetAlertService]
        }
      }
    }

now import shared module in whenever required for example register.module.ts

    import { SharedModule } from './../../common/sharaed/sharaed.module';

    @NgModule({
     imports: [ SharedModule ],
     declarations: [ UserComponent],
     entryComponents: []
    })
    export class RegisterModule { }

now register module has all the modules that are included in shared module

you can also refer this links shared.module.ts, angular real world example shared module, angular-modules-feature-modules