imagekit-developer / imagekit-angular Goto Github PK

Hello, thanks for a nice lib.

I think it might be useful to have some service which can be used in angular component in order to get proper URL.

Possible usage example

Import  { ImagekitService }  from 'imagekitio-angular';

@Component({
    selector: 'app-image-component',
    template: `<img [src]=image />`
})
export class ImageComponent {
    image: string;

    constructor(private imagekitService: ImagekitService) {
        this.image = this.imagekitService.getUrl('path/to/image.png',  [{ width: 300, height: 400 }])
    }
}

Hello,

I am interested in moving from Cloudinary to Imagekit, however Imagekit does not have support for Angular version 9. I tried using it in my Angular 9 application, but I am running into various issues. One of which is the following:

ERROR in ./node_modules/imagekitio-angular/ivy_ngcc/imagekitio-angular.js
Module not found: Error: Can't resolve '../../package.json' in '/angular-starters/node_modules/imagekitio-angular/ivy_ngcc'

Do you know if there are plans to upgrade the library to support Angular 9? If so, when could I expect that to be complete?

Thanks,

Jacob Neterer

Hi,
I'm trying to integrate image-kit with my angular 8 app.

I followed the documentation for setting up the things.

It is working well if I use <ik-image src="my-img-url" alt="This is an alt"></ik-image> in app.component.html but I'm getting the following error if I use it in my lazy loading module components.

To deal with this error, I moved the below code /import to my shared module.

ImagekitioAngularModule.forRoot({
publicKey: environment.publicKey,
urlEndpoint: environment.urlEndpoint,
authenticationEndpoint: environment.authenticationEndpoint + 'image_kit/auth'
}),

But Im getting the below error.

So can you please tell me what I am doing wrong/ missing here.

Thank you.

The compilation error is related to a deprecated API: ModuleWithProviders type without a generic.

Angular error:

Error: node_modules/imagekitio-angular/imagekitio-angular/imagekitio-angular.module.d.ts:4:52 - 
error NG6005: ImagekitioAngularModule.forRoot returns a ModuleWithProviders type without a generic type argument.
Please add a generic type argument to the ModuleWithProviders type.
If this occurrence is in library code you don't control, please contact the library authors.

4     static forRoot(config: ImageKitConfiguration): ModuleWithProviders;

TypeScript error:

Error: node_modules/imagekitio-angular/imagekitio-angular/imagekitio-angular.module.d.ts:4:52 - 
error TS2314: Generic type 'ModuleWithProviders<T>' requires 1 type argument(s).

4     static forRoot(config: ImageKitConfiguration): ModuleWithProviders;

• Upload test cases missing. It should spy function to make sure all parameters are being sent to the Javascript SDK function.
• URL generation test cases do not handle case of leading and trailing slashes in urlEndpoint or path parameter. The SDK should handle the presence and absence of trailing slash in urlEndpoint parameter. Also, the SDK should handle the presence and absence of leading slash in path parameters. The SDK should not add double slash e.g. {urlEndpoint}//{path}
• Adding transformation in query parameter missing

I updated to the most recent version of ImageKit (2.0.2) to get this library working with Angular 16. When building the app with "ng serve" I get following error:

Any idea how to make it work?

Node version : 18.10
Angular: 16.2.0
npm: 9.8.1

Error: node_modules/@angular/core/index.d.ts:5795:26 - error TS2428: All declarations of 'ModuleWithProviders' must have identical type parameters.

5795 export declare interface ModuleWithProviders<T> {
                              ~~~~~~~~~~~~~~~~~~~


Error: node_modules/imagekitio-angular/imagekitio-angular/imagekitio-angular.module.d.ts:4:15 - error TS2428: All declarations of 'ModuleWithProviders' must have identical type parameters.

4     interface ModuleWithProviders {
                ~~~~~~~~~~~~~~~~~~~


Error: node_modules/imagekitio-angular/imagekitio-angular/imagekitio-angular.module.d.ts:5:9 - error TS2717: Subsequent property declarations must have the same type.  Property 'ngModule' must be of type 'Type<T>', but here has type 'Type<any>'.

5         ngModule: Type<any>;
          ~~~~~~~~

  node_modules/@angular/core/index.d.ts:5796:5
    5796     ngModule: Type<T>;
             ~~~~~~~~
    'ngModule' was also declared here.


Error: node_modules/imagekitio-angular/imagekitio-angular/imagekitio-angular.module.d.ts:6:9 - error TS2717: Subsequent property declarations must have the same type.  Property 'providers' must be of type '(Provider | EnvironmentProviders)[]', but here has type 'Provider[]'.

6         providers?: (Provider)[] | undefined;
          ~~~~~~~~~

  node_modules/@angular/core/index.d.ts:5797:5
    5797     providers?: Array<Provider | EnvironmentProviders>;
             ~~~~~~~~~
    'providers' was also declared here.


Error: node_modules/imagekitio-angular/imagekitio-angular/imagekitio-angular.module.d.ts:10:52 - error NG6005: ImagekitioAngularModule.forRoot returns a ModuleWithProviders type without a generic type argument. Please add a generic type argument to the ModuleWithProviders type. If this occurrence is in library code you don't control, please contact the library authors.

10     static forRoot(config: ImageKitConfiguration): ModuleWithProviders;

The README seems to have a typo in the introductory sentence.

ImageKit Angular SDK allows you to resize, optimize, deliver, and upload images and videos in your react application.

I believe the correct sentence should be

ImageKit Angular SDK allows you to resize, optimize, deliver, and upload images and videos in your Angular application.

Add end-to-end test cases using cypress to assert the correct behavior of all functionality. The same has been done in React SDK

Currently with Angular 16 and "imagekitio-angular": "^2.0.0", following error is produced when. buidling the app.

static forRoot(config: ImageKitConfiguration): ModuleWithProviders;

Is there any way to use this library with Angular 16 or is there an update needed from you?

Hi,

I'm trying to add LQIP function, unfortunately without success.
My pictures are stored in AWS S3 in different folders :

• projects/XX.jpg
• covers/XX.jpg

My component.html :

<ik-image [path]="path" [lqip]="lqip"></ik-image>

My component.ts :

lqip = { active: true, quality: 5 };

In the network tab I catch this url :
https://ik.imagekit.io/token/tr:q-5/projects
Why the end of the path is missing ?

Without lqip I can see my image :
https://ik.imagekit.io/token/projects/13/XX.jpg?ik-sdk-version=angular-1.0.2

Other question : There is a way to add blur on lqip ?

Reported Issue:

Using the SDK on @angular/core 17.0.2 throws the error "ImagekitioAngularModule.forRoot returns a ModuleWithProviders type without a generic type argument. Please add a generic type to the ModuleWithProviders type. If this occurence is in library code you don't control, please contact the library authors."

Issue:

Angular has deprecated "ModuleWithProviders type without a generic"

Please refer to following links for reference associated with this deprecation

• https://angular.io/guide/deprecations#modulewithproviders-type-without-a-generic
• https://angular.io/guide/migration-module-with-providers

Solution:

Add ImagekitioAngularModule type argument to ModuleWithProviders in file imagekitio-angular.module.ts

The code should look like

static forRoot(config: ImageKitConfiguration): ModuleWithProviders<ImagekitioAngularModule> {

In the preliminary phases of looking at image kit as solution for product I’m working on. Curious if this will work with the latest version of angular.

• Include instruction on how to run sample application.

At the moment, there is no way to pass the loading="lazy" attribute for lazy loading.
Expose an Input() on the ik-image component to allow passing such input.

https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading