How to use directive in more than one module in angular 2

Question

I declare directive in two module then return error is Type PermissionDirective is part of the declarations of 2 modules and i declare only one module then return error is Can't bind to 'isPermission' since it isn't a known property of 'button'. What is the problem here.

Please understand my app structure.

permission.directive.ts

import { Directive, Input } from '@angular/core';
import { TemplateRef, ViewContainerRef } from '@angular/core';
import { LoginInfoService } from '../service/auth.service';

@Directive({ selector: '[isPermission]' })
export class PermissionDirective {
  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef,
    private _auth: LoginInfoService
  ) {
  }
  @Input() set isPermission(_module_action: Array<string>) {
    let permission = this._auth.isPermission(_module_action[0], _module_action[1]);
    if (permission) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
  }
}

layout.route.ts

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LayoutComponent } from './layout.component';

const layoutRoutes: Routes = [
   {
      path: '',
      component: LayoutComponent,
      children: [
         {
            path: '',
            loadChildren: () => import('app/dashboard/dashboard.module').then(m => m.DashboardModule),
         },
         {
            path: 'users',
            loadChildren: () => import('app/users/users.module').then(m => m.UsersModule),
         }
      ]
   }
];

export const layoutRouting: ModuleWithProviders = RouterModule.forChild(layoutRoutes);

layout.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PermissionDirective } from 'app/common/directives/permission.directive';

@NgModule({
  imports: [
    CommonModule,
    layoutRouting
  ],
  exports:[],
  declarations: [
    PermissionDirective
  ],
  providers:[]
})
export class LayoutModule { }

dashboard.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
...
import { PermissionDirective } from 'app/common/directives/permission.directive';

@NgModule({
  imports: [
    CommonModule,
    dashboardRouting,
    ....
  ],
  declarations: [
    DashboardComponent,
    PermissionDirective
  ],
  providers: []

})
export class DashboardModule { }

SharedModule

import { NgModule, Optional, SkipSelf, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
.........
import { PermissionDirective } from 'app/common/directives/permission.directive';

@NgModule({
  imports:      [ 
    ....
  ],
  declarations: [ 
    ....
    PermissionDirective
  ],
  exports:      [ 
   ...
    PermissionDirective,
    ...
  ],
  providers:    [  
    ...
  ]
})
export class SharedModule { 
  constructor (@Optional() @SkipSelf() parentModule: SharedModule, private dateAdapter:DateAdapter<Date>) {
    if (parentModule) {
      throw new Error(
        'SharedModule is already loaded. Import it in the AppModule only');
    }
    this.dateAdapter.setLocale('en-in'); // DD/MM/YYYY
  }
}

Answer 1

I would recommend you create a shared module that import the directive then you can import that module to your module like this

shared.module.ts

@NgModule({
  exports: [PermissionDirective],
  declarations: [PermissionDirective]
})
export class SharedModule {}

then import SharedModule to your module

@NgModule({
  imports: [
    CommonModule,
    dashboardRouting,
    SharedModule
  ],
  declarations: [
    DashboardComponent
  ],
  providers: []

})
export class DashboardModule { }


@NgModule({
  imports: [
    CommonModule,
    layoutRouting,
    SharedModule
  ],
  exports:[],
  declarations: [
  ],
  providers:[]
})
export class LayoutModule { }