Integrating Express Embed SDK using Angular 15

Report · Nov 23, 2024

Hello Everyone,
I am trying to integrate Express Embed with my angular application. I am able to see every scripts is getting fetched as it is happening in sample but still the SDK is not getting loaded I have also served my localhost with https and valid SSL certificate and allowed the port also in my console still its not opening. Some error are coming in console but those error are also coming in sample code too which is working fine.

Can you guys please help me on where I am doing wrong or is there something I am missing. Here is the code:

// adobe-express.service.ts

import { Injectable } from '@angular/core';
import "@spectrum-web-components/theme/express/theme-light.js";
import "@spectrum-web-components/theme/express/scale-medium.js";
import "@spectrum-web-components/theme/sp-theme.js";
import "@spectrum-web-components/button/sp-button.js";
import "@spectrum-web-components/divider/sp-divider.js";

@Injectable({
  providedIn: 'root',
})
export class AdobeSdkService {
  private editor: any;

  constructor() {}

  async loadSDK(): Promise<void> {
    const CDN_URL = 'https://cc-embed.adobe.com/sdk/v4/CCEverywhere.js';

    const initializeParams = {
      clientId: '7746803e9f1049c7813d6a7edcee7a4e',
      appName: 'Embed SDK Sample',
    };

    const configParams = {
      loginMode: 'delayed',
    };

    try {
      await new Promise<void>((resolve, reject) => {
        const script = document.createElement('script');
        script.src=CDN_URL;
        script.onload = async () => {
          if (!window.CCEverywhere) {
            reject('Adobe Express Embed SDK failed to load');
            return;
          }
          try {
            const { editor } = await (window as any).CCEverywhere.initialize(initializeParams, configParams);
            console.log("CCEverywhere loaded", window.CCEverywhere);
            this.editor = editor;
            resolve();
          } catch (error) {
            reject(`Failed to initialize Adobe SDK: ${error}`);
          }
        };
        script.onerror = () => reject('Failed to load Adobe Express Embed SDK script');
        document.body.appendChild(script);
      });
    } catch (error) {
      console.error('Error loading SDK:', error);
    }
}


  async createDesign(base64Asset: string): Promise<void> {
    if (!this.editor) {
      throw new Error('Adobe SDK not initialized.');
    }

    const exportOptions = [
      {
        id: 'download',
        label: 'Download',
        action: { target: 'download' },
        style: { uiType: 'button' },
      },
      {
        id: 'save-modified-asset',
        label: 'Save image',
        action: { target: 'publish' },
        style: { uiType: 'button' },
      },
    ];

    const appConfig = {
      callbacks: {
        onPublish: (intent: any, publishParams: any) => {
          console.log('Published:', publishParams);
        },
        onError: (err: any) => {
          console.error('Error:', err);
        },
      },
    };

    const docConfig = {
      asset: {
        data: base64Asset,
        dataType: 'base64',
        type: 'image',
      },
    };

    await this.editor.createWithAsset(docConfig, appConfig, exportOptions);
  }
}

Here is the component code which is triggering the service.

public assetKebabClick(clickEvent: KebabClick){
    switch (true){
        case clickEvent.kebabEvent === 'adobe-express':
          this.updateAdobeExpressSDK('file_URL');
          break;        
    }
  }

 updateAdobeExpressSDK(url: string): void {
    this.convertUrlToBase64(url)
      .then((base64Image) => {
        console.log('Base64 Image:', base64Image);
        this.adobeSdkService.createDesign(base64Image).catch((error) => {
          console.error('Error initializing Adobe SDK with Base64 image:', error);
        });
      })
      .catch((error) => {
        console.error('Error converting URL to Base64:', error);
      });
  }

  private convertUrlToBase64(url: string): Promise<string> {
    return fetch(url)
      .then((response) => {
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.blob();
      })
      .then(
        (blob) =>
          new Promise<string>((resolve, reject) => {
            const reader = new FileReader();
            reader.onloadend = () => resolve(reader.result as string);
            reader.onerror = () =>
              reject(new Error('Failed to read blob as Base64'));
            reader.readAsDataURL(blob);
          })
      );
  }

I have also attached some screenshots doc check those too.

All the scripts as you can see are loaded successfully too.

Please help me on this issue if anyone have integrated on angular or has sample code of angular and Express embed do share me gist.

Report · Nov 23, 2024

After some time this error comes in console