feat: add provideImageKit for standalone angular apps

Author: SwarnimDoegar

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

@@ -1,5 +1,5 @@
 import { Component, AfterViewInit, OnInit, ElementRef, Input, OnChanges } from '@angular/core';
-import { ImagekitService } from '../imagekitio-angular.service';
+import { ImagekitService } from '../imagekit-angular.service';
 import { Dict, QueryParameters, IkImageComponentOptions } from '../utility/ik-type-def-collection';
 import { getInt } from '../utility/utils';
 import { buildSrc, getResponsiveImageAttributes, SrcOptions } from '@imagekit/javascript';

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

@@ -1,5 +1,5 @@
 import { Component, OnInit, ElementRef, Input } from '@angular/core';
-import { ImagekitService } from '../imagekitio-angular.service';
+import { ImagekitService } from '../imagekit-angular.service';
 import { IkVideoComponentOptions, QueryParameters, Dict } from '../utility/ik-type-def-collection';
 import { buildSrc, SrcOptions } from '@imagekit/javascript';
 import type { Transformation } from '@imagekit/javascript'

sdk/src/lib/imagekitio-angular.module.ts sdk/src/lib/imagekit-angular.module.tssdk/src/lib/imagekitio-angular.module.ts renamed to sdk/src/lib/imagekit-angular.module.ts

@@ -2,7 +2,9 @@ import { CommonModule } from '@angular/common';
 import { ModuleWithProviders, NgModule } from '@angular/core';
 import { IkImageComponent } from './ik-image/ik-image.component';
 import { IkVideoComponent } from './ik-video/ik-video.component';
-import { ImageKitConfiguration, ImagekitService } from './imagekitio-angular.service';
+import { ImagekitService } from './imagekit-angular.service';
+import { ImageKitConfiguration } from './utility/ik-type-def-collection';
+import { provideImageKit } from './imagekit-angular.tokens';
 
 @NgModule({
   declarations: [
@@ -20,9 +22,7 @@ export class ImagekitioAngularModule {
   static forRoot(config: ImageKitConfiguration): ModuleWithProviders<ImagekitioAngularModule> {
     return {
       ngModule: ImagekitioAngularModule,
-      providers: [
-        {provide: ImageKitConfiguration, useValue: config }
-      ]
+      providers: [provideImageKit(config)]
     };
   }
 }

sdk/src/lib/imagekitio-angular.service.ts sdk/src/lib/imagekit-angular.service.tssdk/src/lib/imagekitio-angular.service.ts renamed to sdk/src/lib/imagekit-angular.service.ts

@@ -1,22 +1,19 @@
-import { Injectable } from '@angular/core';
+import { Inject, Injectable, InjectionToken, Provider } from '@angular/core';
 import { buildSrc } from '@imagekit/javascript';
 import type { SrcOptions } from '@imagekit/javascript';
-import type { SrcOptions as AngularSourceOptions } from './utility/ik-type-def-collection';
-const SDK_VERSION = '5.1.0';
-
-export class ImageKitConfiguration {
-  urlEndpoint: AngularSourceOptions['urlEndpoint'];
-  transformationPosition?: AngularSourceOptions['transformationPosition'];
-  sdkVersion?: string;
-}
+import { ImageKitConfiguration } from './utility/ik-type-def-collection';
+import { IMAGEKIT_CONFIG } from './imagekit-angular.tokens';
+const SDK_VERSION = '6.0.0';
 
 
 @Injectable()
 export class ImagekitService {
 
   private configuration: ImageKitConfiguration;
 
-  constructor(config: ImageKitConfiguration) {
+  constructor(
+    @Inject(IMAGEKIT_CONFIG) config: ImageKitConfiguration
+  ) {
     this.configuration = {
       ...config,
       sdkVersion: `angular-${SDK_VERSION}`

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

@@ -0,0 +1,13 @@
+import { InjectionToken, Provider } from "@angular/core";
+import { ImageKitConfiguration } from "./utility/ik-type-def-collection";
+
+
+export const IMAGEKIT_CONFIG = new InjectionToken<ImageKitConfiguration>(
+  'IMAGEKIT_CONFIG'
+);
+
+export function provideImageKit(
+  config: ImageKitConfiguration
+): Provider {
+  return { provide: IMAGEKIT_CONFIG, useValue: config };
+}

sdk/src/lib/utility/ik-type-def-collection.ts

@@ -83,4 +83,10 @@ export interface AuthResponse {
   signature: string;
   expire: string;
   token: string;
-}
+}
+
+export class ImageKitConfiguration {
+  urlEndpoint: SrcOptions['urlEndpoint'];
+  transformationPosition?: SrcOptions['transformationPosition'];
+  sdkVersion?: string;
+}

sdk/src/public-api.ts

@@ -2,10 +2,12 @@
  * Public API Surface of imagekitio-angular
  */
 
-export * from './lib/imagekitio-angular.service';
+export * from './lib/imagekit-angular.service';
+export * from './lib/imagekit-angular.tokens';
 export * from './lib/ik-image/ik-image.component';
 export * from './lib/ik-video/ik-video.component';
-export * from './lib/imagekitio-angular.module';
+export * from './lib/imagekit-angular.module';
+export { ImageKitConfiguration } from './lib/utility/ik-type-def-collection';
 
 // Re-export utility functions from @imagekit/javascript
 export {

sdk/tests/sdk-tests/ik-image-responsive.spec.ts

@@ -1,7 +1,7 @@
 import { ElementRef } from "@angular/core";
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { IkImageComponent } from "../../src/lib/ik-image/ik-image.component";
-import { ImagekitService } from "../../src/lib/imagekitio-angular.service";
+import { ImagekitService } from "../../src/lib/imagekit-angular.service";
 import { IkImageComponentOptions } from '../../src/lib/utility/ik-type-def-collection'
 
 describe("IkImageComponent - Responsive Features", () => {

sdk/tests/sdk-tests/ik-image.component.spec.ts

@@ -1,7 +1,7 @@
 import { ElementRef } from "@angular/core";
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { IkImageComponent } from "../../src/lib/ik-image/ik-image.component";
-import { ImagekitService } from "../../src/lib/imagekitio-angular.service";
+import { ImagekitService } from "../../src/lib/imagekit-angular.service";
 import { IkImageComponentOptions } from '../../src/lib/utility/ik-type-def-collection'
 
 describe("IkImageComponent", () => {

sdk/tests/sdk-tests/ik-video.component.spec.ts

@@ -1,7 +1,7 @@
 import { ElementRef } from "@angular/core";
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { IkVideoComponent } from "../../src/lib/ik-video/ik-video.component";
-import { ImagekitService } from "../../src/lib/imagekitio-angular.service";
+import { ImagekitService } from "../../src/lib/imagekit-angular.service";
 import { IkVideoComponentOptions } from '../../src/lib/utility/ik-type-def-collection'
 
 describe("IkVideoComponent", () => {