When I declare the directive in two modules, I get an error that says
Type PermissionDirective is part of the declarations of 2 modulesCan't bind to 'isPermission' since it isn't a known property of 'button'I would appreciate it if you could take a look at 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
}
}