Angular 5 cannot connect ImageCropperComponent to its components

Question

I installed the package "ngx-image-cropper" The structure of my project is as follows

• App
• App -> Pages
• App -> Pages -> Page 1 -> Component1
• App -> Pages -> Page 2 -> Component2

If I connect the cropper to Component1 then everything works I import The ImageCropperComponent component into Page1.module.ts But now I need to work in Component2 cropper. Removing import from Page1.module.ts, I add it to the module above, that is, in Page.module.ts . And my app stops seeing him.

Console.log

  Uncaught (in promise): Error: Template parse errors:
Can't bind to 'image' since it isn't a known property of 'img-cropper'.
1. If 'img-cropper' is an Angular component and it has 'image' input, then verify that it is part of this module.
2. If 'img-cropper' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("ex justify-content-center text-center"

I tried to install and ImageCropperModule in the App.module.ts and Page.module.ts without results, get the same error. How do I install cropper for my components? What is my mistake?

My page.module.ts

 import { NgModule } from '@angular/core';
import { PagesComponent } from './pages.component';
import { PagesRoutingModule } from './pages-routing.module';
import { ThemeModule } from '../@theme/theme.module';
import { NewsModule} from './news/news.module';
import {ImageCropperComponent} from 'ngx-img-cropper';
const PAGES_COMPONENTS = [
  PagesComponent,
    ImageCropperComponent,
];

@NgModule({
  imports: [
    PagesRoutingModule,
    ThemeModule,
      NewsModule,
  ],
  declarations: [
    ...PAGES_COMPONENTS,
  ],
})
export class PagesModule {
}

My component2.component.html (This code is also used in other components)

<img-cropper class="croppedBlock d-flex justify-content-center text-center"
                                     *ngIf="cropperVisible" [image]="data1" [settings]="cropperSettings1"
                                     (onCrop)="boundInfo($event)"></img-cropper>
                        <div class="resultCropper">
                      <span class=" imageCropper" *ngIf="data1.image">
                        <img *ngIf="savedImage" [src]="data1.image">
                            </span>
                            <button class="btn {{classButtonCropper}} d-block mb-2 mt-2 ml-auto mr-auto"
                                    (click)="cropped(bounds)" *ngIf="statusCropped" [innerHtml]="statusCropped">
                            </button>
                        </div>

Decision Remove ImageCropperComponent from parent module and import ImageCropperModule to each parent module where It will be used

Answer 1

This should look like this.

page.module.ts

import { NgModule } from '@angular/core';
import { PagesComponent } from './pages.component';
import { ImageCropperModule } from 'ngx-img-cropper';

const PAGES_COMPONENTS = [
  PagesComponent
];

@NgModule({
  imports: [
    ImageCropperModule
  ],
  declarations: [
    ...PAGES_COMPONENTS,
  ],
})
export class PagesModule {}

page.component.ts

import { CropperSettings } from 'ngx-img-cropper';

@Component({
    selector: 'page',
    encapsulation: ViewEncapsulation.Emulated,
    templateUrl: './page.component.html'
})
export class PageComponent {

    public data: any;
    public cropperSettings: CropperSettings;

    constructor() {

        this.cropperSettings = new CropperSettings();
        this.cropperSettings.width = 100;
        this.cropperSettings.height = 100;
        this.cropperSettings.croppedWidth = 100;
        this.cropperSettings.croppedHeight = 100;
        this.cropperSettings.canvasWidth = 400;
        this.cropperSettings.canvasHeight = 300;

        this.data = {};
    }
}

page.component.html

<img-cropper [image]="data" [settings]="cropperSettings"></img-cropper><br>
<img [src]="data.image" [width]="cropperSettings.croppedWidth" [height]="cropperSettings.croppedHeight">