feat: angular sdk overhaul #132

SwarnimDoegar · 2025-12-15T21:56:13Z

No description provided.

Copilot

Pull request overview

This PR represents a major overhaul of the ImageKit Angular SDK, upgrading it from version 5.x to 6.x. The changes include a package rename, API simplification, architectural improvements, and enhanced testing infrastructure.

Key Changes:

Package renamed from imagekitio-angular to @imagekit/angular with updated module structure
API simplified by removing path parameter (replaced with src), removing publicKey from configuration, and removing LQIP feature
Upload component removed in favor of functional upload() API re-exported from core JavaScript SDK
New responsive image support enabled by default with automatic srcset generation

Reviewed changes

Copilot reviewed 69 out of 84 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
sdk/package.json	Updated package name, version to 6.0.0, dependencies, and build configuration
sdk/src/lib/imagekit-angular.module.ts	Renamed module from ImagekitioAngularModule to ImagekitAngularModule, removed upload component
sdk/src/lib/imagekit-angular.service.ts	Simplified service to use @imagekit/javascript buildSrc instead of imagekit-javascript SDK
sdk/src/lib/ik-image/ik-image.component.ts	Added responsive image support with srcset generation, removed LQIP functionality
sdk/src/lib/ik-video/ik-video.component.ts	Replaced `path` parameter with `src`, simplified component logic
sdk/src/public-api.ts	Updated exports to re-export functions and types from @imagekit/javascript
test-app/	New comprehensive test application demonstrating SDK features with Cypress E2E tests
README.md	Extensive documentation updates including migration guide, new upload examples, and API changes
sdk/tests/sdk-tests/	Updated unit tests to reflect API changes and removed upload component tests

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

test-app/src/app/app.component.spec.ts

sdk/src/lib/ik-image/ik-image.component.ts

ahnv · 2025-12-17T05:38:29Z

@codex review

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

sdk/src/lib/imagekit-angular.service.ts

ahnv · 2025-12-17T05:52:22Z

@codex review for regressions as part of the overhaul

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

sdk/src/lib/imagekit-angular.service.ts

sdk/src/lib/ik-image/ik-image.component.ts

Copilot

Pull request overview

Copilot reviewed 68 out of 83 changed files in this pull request and generated 2 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

sdk/src/lib/ik-video/ik-video.component.ts

sdk/src/lib/ik-image/ik-image.component.ts

hrhv · 2025-12-17T15:01:33Z

sdk/src/lib/ik-video/ik-video.component.ts

+  template: `<video></video>`,
+})
+
+export class IkVideoComponent implements OnInit {


This class should also implement OnChanges and AfterViewInit since we have the functions ngAfterViewInit() and ngOnChanges().

Ref:

https://v17.angular.io/api/core/OnChanges

https://v17.angular.io/api/core/AfterViewInit

Suggested change

export class IkVideoComponent implements OnInit {

export class IkVideoComponent implements OnInit, OnChanges, AfterViewInit {

hrhv · 2025-12-17T15:02:44Z

sdk/src/lib/ik-image/ik-image.component.ts

+  @Input('queryParameters') queryParameters: QueryParameters;
+  @Input('loading') loading: string = "lazy";
+  @Input('width') width: number | string;
+  @Input('height') height: string;


If width is number | string, shouldn't this be the same?

Suggested change

@Input('height') height: string;

@Input('height') height: number | string;

hrhv · 2025-12-17T15:04:40Z

sdk/src/lib/ik-video/ik-video.component.ts

+    this.setElementAttributes(video, attrsToSet);
+  }
+
+  namedNodeMapToObject(source: NamedNodeMap): Dict {


We have the same function in ik-image component too. Let's extract this to a shared util.

hrhv · 2025-12-17T15:05:07Z

sdk/src/lib/ik-image/ik-image.component.ts

+    context.setElementAttributes(image, attrsToSet);
+  }
+
+  namedNodeMapToObject(source: NamedNodeMap): Dict {


We have the same function in ik-video component too. Let's extract this to a shared util.

hrhv · 2025-12-17T15:05:26Z

sdk/src/lib/ik-image/ik-image.component.ts

+    return target;
+  };
+
+  setElementAttributes(element: any, attributesLiteral: Dict): void {


We have the same function in ik-video component too. Let's extract this to a shared util.

hrhv · 2025-12-17T15:16:48Z

sdk/src/lib/ik-image/ik-image.component.ts

+    this.setUrl(options);
+  }
+
+  ngOnChanges(): void {


Calling lifecycle hooks manually is anti-pattern. Instead, extract the logic in these hooks into separate functions and then call them from both the places.

Ref: https://www.linkedin.com/pulse/why-you-shouldnt-trigger-lifecycle-hooks-manually-prakhar-srivastava-ybxnf/

hrhv · 2025-12-17T15:17:21Z

sdk/src/lib/ik-video/ik-video.component.ts

+    };
+    this.setUrl(options);
+  }
+  ngOnChanges(): void {


Calling lifecycle hooks manually is anti-pattern. Instead, extract the logic in these hooks into separate functions and then call them from both the places.

Ref: https://www.linkedin.com/pulse/why-you-shouldnt-trigger-lifecycle-hooks-manually-prakhar-srivastava-ybxnf/

hrhv · 2025-12-17T15:19:48Z

sdk/src/lib/ik-image/ik-image.component.ts

+      this.url = buildSrc(strictOptions);
+      this.srcset = '';
+    } else {
+      const { src: newSrc, srcSet } = getResponsiveImageAttributes({


What if this function errors out? We should handle it in try-catch.

hrhv · 2025-12-17T15:19:59Z

sdk/src/lib/ik-image/ik-image.component.ts

+    const strictOptions = options as SrcOptions;
+
+    if (!this.responsive) {
+      this.url = buildSrc(strictOptions);


What if this function errors out? We should handle it in try-catch.

hrhv · 2025-12-17T15:20:24Z

sdk/src/lib/ik-video/ik-video.component.ts

+      return null;
+    }
+    const strictOptions = options as SrcOptions
+    this.url = buildSrc(strictOptions);


What if this function errors out? We should handle it in try-catch.

imagekitio · 2025-12-24T03:38:43Z

sdk/src/lib/ik-image/ik-image.component.ts

+import { buildSrc, getResponsiveImageAttributes, SrcOptions } from '@imagekit/javascript';
+import type { Transformation } from '@imagekit/javascript'
+
+@Component({


Components are not marked as standalone, preventing direct import in standalone Angular applications (14+).

The SDK claims standalone support but only provides half the solution - it has the provider function but the components themselves aren't standalone. Consumers must still import the entire ImagekitAngularModule even in standalone apps, which defeats the purpose of Angular's modern standalone API.

imagekitio · 2025-12-24T03:39:24Z

README.md

 ## Version Support
 | SDK Version | Angular 11.x | Angular 12.2.x | Angular 13.x | Angular 14.x | Angular 15.x | Angular 16.x | Angular 17.x |
 |-------------|---------|---------|---------|---------|---------|---------|---------|
+| 6.x         | ❌     |  ✔️     | ✔️     | ✔️       | ✔️       | ✔️     |✔️      |


Version support table ends at Angular 17, but Angular 18 is the current LTS (released May 2024, LTS until Nov 2025).

imagekitio · 2025-12-24T03:40:09Z

README.md


 ImageKit is complete media storage, optimization, and transformation solution that comes with an image and video CDN. It can be integrated with your existing infrastructure - storage like AWS S3, web servers, your CDN, and custom domain names, allowing you to deliver optimized images in minutes with minimal code changes.

 ## Breaking changes


Remove from here. Follow other frontend SDKs (Next, React, Vue) for changelog format.

imagekitio · 2025-12-24T03:41:34Z

sdk/package.json

-        "ng-packagr": "^12.1.1",
-        "typescript": "~4.3.5"
-    }
+  "name": "@imagekit/angular",


Just verify this once.

Missing modern exports field for optimal tree-shaking and subpath imports.

{ "exports": { ".": { "types": "./index.d.ts", "esm2022": "./esm2022/imagekit-angular.mjs", "esm": "./esm/imagekit-angular.mjs", "default": "./fesm2022/imagekit-angular.mjs" } } }

Note: ng-packagr v12+ should generate this automatically. Verify in built package.

imagekitio · 2025-12-24T03:41:53Z

sdk/package.json

+  "name": "@imagekit/angular",
+  "version": "6.0.0",
+  "description": "Angular SDK for ImageKit.io - Image and video optimization, transformation, and delivery platform",
+  "keywords": [


Can we safely add sideEffects: false declaration for tree-shaking optimization, assuming SDK has no global side effects.

imagekitio · 2025-12-24T03:43:16Z

sdk/package.json

+  "peerDependencies": {
+    "@angular/common": ">=12.2.0",
+    "@angular/core": ">=12.2.0",
+    "@imagekit/javascript": "^5.1.0"


@imagekit/javascript needs to be in dependencies. That's it. It is in peer and dev dependencies at the moment. Makes no sense. Check react pacakge.json https://github.com/imagekit-developer/imagekit-react/blob/master/package.json

imagekitio · 2025-12-24T04:01:24Z

sdk/src/lib/ik-image/ik-image.component.ts

+    }
+  }
+
+  loadImage(context: IkImageComponent, url: string, srcset: string): void {


SSR Support is Missing

Problem:

This SDK does not support Server-Side Rendering (SSR) and will crash in Angular Universal applications.

Root Cause:

Components directly manipulate the DOM using browser-only APIs:

ElementRef.nativeElement access in lifecycle hooks

Direct DOM manipulation via nativeElement.attributes and nativeElement.children.

Example of the Issue:

// Current code in ik-image.component.ts (lines 88-109) loadImage(context: IkImageComponent, url: string, srcset: string): void { const nativeElement = context.el.nativeElement; // ❌ Crashes on server const attributes = nativeElement.attributes; // ❌ Browser-only API const image = nativeElement.children[0]; // ❌ Browser-only API setElementAttributes(image, attrsToSet, context.selector); }

Impact:

❌ Cannot use with Angular Universal (SSR)
❌ Cannot use with Angular prerendering
❌ Blocks adoption for SEO-critical applications
❌ React/Vue/Next SDKs all support SSR - we're behind

imagekitio · 2025-12-24T04:02:46Z

README.md

+// For file uploads, see the File Upload section
 ```

 ## Demo application


Outdated readme. Moreover it needs to follow convention of React/JS/Vue/Next SDK repos. We point to our quick start docs instead of repeating ourselves here in readme.

imagekitio · 2025-12-24T04:03:52Z

.github/workflows/nodejs.yml

-        URL_ENDPOINT: ${{ secrets.ik_url_endopint }}
  e2e:
    runs-on: ubuntu-latest
+    needs: build


Using Node.js 14.x which reached End-of-Life on April 30, 2023.

imagekitio · 2025-12-24T04:04:53Z

sdk/tsconfig.json

    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
+    "strict": false,


Strict mode disabled, reducing type safety guarantees. Why we did this?

SwarnimDoegar added 8 commits December 16, 2025 03:20

feat: angular sdk overhaul

e5c9eba

chore: Add sdk install script in test-app

901e9a0

chore: update documentation

196ce69

feat: add provideImageKit for standalone angular apps

4d7bdf2

chore: update README for standalone app specific instructions

7a45362

Rename SDK module

f0c899b

chore: Update READMEs

85def5a

chore: Remove unwanted imports

4dc0e1b

ahnv requested a review from Copilot December 17, 2025 05:20

Copilot AI reviewed Dec 17, 2025

View reviewed changes

test-app/src/app/app.component.spec.ts Outdated Show resolved Hide resolved

test-app/src/app/app.component.spec.ts Outdated Show resolved Hide resolved

sdk/src/lib/ik-image/ik-image.component.ts Outdated Show resolved Hide resolved

chatgpt-codex-connector bot reviewed Dec 17, 2025

View reviewed changes

sdk/src/lib/imagekit-angular.service.ts Outdated Show resolved Hide resolved

chatgpt-codex-connector bot reviewed Dec 17, 2025

View reviewed changes

sdk/src/lib/imagekit-angular.service.ts Outdated Show resolved Hide resolved

sdk/src/lib/ik-image/ik-image.component.ts Outdated Show resolved Hide resolved

fix: Resolve AI review comments

96c1f9e

SwarnimDoegar requested a review from Copilot December 17, 2025 07:15

Copilot AI reviewed Dec 17, 2025

View reviewed changes

sdk/src/lib/ik-video/ik-video.component.ts Show resolved Hide resolved

sdk/src/lib/ik-image/ik-image.component.ts Outdated Show resolved Hide resolved

fix: Resolve AI review comment

bf79dea

hrhv requested changes Dec 17, 2025

View reviewed changes

fix: Resolve SDK comments

a15bc81

imagekitio requested changes Dec 24, 2025

View reviewed changes

	export class IkVideoComponent implements OnInit {
	export class IkVideoComponent implements OnInit, OnChanges, AfterViewInit {

	@Input('height') height: string;
	@Input('height') height: number \| string;


		ImageKit is complete media storage, optimization, and transformation solution that comes with an image and video CDN. It can be integrated with your existing infrastructure - storage like AWS S3, web servers, your CDN, and custom domain names, allowing you to deliver optimized images in minutes with minimal code changes.

		## Breaking changes

feat: angular sdk overhaul #132

Are you sure you want to change the base?

feat: angular sdk overhaul #132

Uh oh!

Conversation

SwarnimDoegar commented Dec 15, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ahnv commented Dec 17, 2025

Uh oh!

chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

ahnv commented Dec 17, 2025

Uh oh!

chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

SSR Support is Missing

Problem:

Root Cause:

Example of the Issue:

Impact:

Uh oh!

imagekitio Dec 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

imagekitio Dec 24, 2025 •

edited

Loading