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.

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

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

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

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants