'image-cropper' is not a known element error

Hi,

at first thanks for this nice project! I wanted to create a component which allows me to upload and crop it afterwards.

I have a module for the ui components: ui.module.ts

import { NgModule } from '@angular/core';
import { ImageCropperModule } from 'ngx-image-cropper';
import { ImageUploadComponent } from './image-upload/image-upload.component';

@NgModule({
    imports: [
        ImageCropperModule
    ],
    declarations: [
        ImageUploadComponent,
    ],
    exports: [
        ImageUploadComponent,
    ]
})
export class UiModule { }

image-upload-component.html

<input type="file" (change)="fileChangeEvent($event)" />
<image-cropper format="png" (imageCropped)="imageCropped($event)" (imageLoaded)="imageLoaded()" (cropperReady)="cropperReady()" (loadImageFailed)="loadImageFailed()"></image-cropper>
<img [src]="croppedImage" />

Here I’m getting the error:

‘image-cropper’ is not a known element:

1. If ‘image-cropper’ is an Angular component, then verify that it is part of this module.
2. If ‘image-cropper’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.

When I’m importing the ImageCropperModule in the app.module.ts directly and then using the image-cropper component in the app.component.html then everything works well. What’s my fault with the extra module?

Thanks in advance!

[maxbauer]

Ok, very strange. I restarted my vs code, recompiled the project and it works like expected 🙄

[Mawi137]

I have no idea to be honest. Importing the ImageCropperModule in the module where the component is used, should be enough. Like you did.