Filevalidation directive declaration not working in two different module

Question

Uncaught Error: Type FileValueAccessor is part of the declarations of 2 modules: moduleX and moduleY Please consider moving FileValueAccessor to a higher module that imports moduleX and moduleY. You can also create a new NgModule that exports and includes FileValueAccessor then import that NgModule in moduleX and moduleY.

If I declared FileValueAccessor and both module in app.module then it's perusing another template error.

ERROR DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

It's work on app.module if I declare component which used file validation in different module.

Why do I need to declared those component in app.module? I already have two different modules which use lazy loading.

Tried with import export component from both module but it want work too :(

Answer 1

To solve this problem "Type FileValueAccessor is part of the declarations of 2 modules"

We need to create shared/Shared.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { FileValueAccessor } from './validation/file-control-value-accessor';
import { FileValidator } from './validation/file-input.validator';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule
  ],
  exports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    FileValueAccessor,
    FileValidator
  ],
  declarations: [
    FileValueAccessor,
    FileValidator
  ],
  providers: [
  ]
})
export class SharedModule { }

And import this shared.module.ts file to moduleX and moduleY. this will fix the problem.