Search
Loading...
Skip to content

Existing Angular Project

This guide walks you through integrating the CreativeEditor SDK (CE.SDK) into an existing Angular application. You’ll learn how to create an editor component that correctly initializes and disposes of CE.SDK resources.

Who is This Guide For?#

This guide is for developers who:

  • Are already working within an existing Angular codebase.
  • Want to add CE.SDK for design or media editing capabilities.
  • Prefer to install via npm and integrate within a reusable Angular component.

What You’ll Achieve#

  • Add CE.SDK to an existing Angular project.
  • Embed the editor within a component.
  • Load the editor with a default configuration and run it locally.

Prerequisites#

Before you begin, make sure your project has:

  • Angular (v12 or later)
  • Node.js (v20 or later)
  • A valid CE.SDK license key (Get a free trial)

Step 1: Install CE.SDK via NPM#

From your Angular project root:

Terminal window
npm install @cesdk/cesdk-js

Step 2: Add a CE.SDK Container to Your Component#

Choose the component where you want to integrate CE.SDK (e.g. app.component or any feature component).

In the HTML file (.component.html):#

<div #cesdk_container [style.height.vh]="'100'" [style.width.vw]="'100'"></div>

This sets up a full-viewport container for the editor.

Step 3: Initialize CE.SDK in the Component Logic#

In the TypeScript file (.component.ts):#

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
import CreativeEditorSDK, { Configuration } from '@cesdk/cesdk-js';


@Component({
  selector: 'app-editor', // adjust as needed
  templateUrl: './editor.component.html',
  styleUrls: ['./editor.component.css'],
})
export class EditorComponent implements AfterViewInit {
  @ViewChild('cesdk_container') containerRef!: ElementRef;


  ngAfterViewInit(): void {
    const config: Configuration = {
      license: 'YOUR_LICENSE_KEY', // Replace with your actual CE.SDK license key
      baseURL:
        'https://cdn.img.ly/packages/imgly/cesdk-js/1.53.0/assets',
      callbacks: {
        onUpload: 'local',
      },
      appIdentifier: 'ly.img.ubq', // Optional: Set for consistent licensing/analytics
    };


    CreativeEditorSDK.create(this.containerRef.nativeElement, config).then(
      async (instance: any) => {
        instance.addDefaultAssetSources();
        instance.addDemoAssetSources({ sceneMode: 'Design' });
        await instance.createDesignScene();
      },
    );
  }
}

Setup Notice#

Note: By default, CE.SDK assets (e.g., stickers, fonts, images) are loaded from IMG.LY’s CDN. For production environments, it’s recommended to serve assets from your own servers.

Step 4: Serve the Project#

Start your Angular app as usual:

Terminal window
ng serve

Then navigate to http://localhost:4200/ and you should see CE.SDK loaded in your chosen component.

Troubleshooting & Common Errors#

❌ Error: Cannot read property 'nativeElement' of undefined

  • Ensure @ViewChild('cesdk_container') matches the #cesdk_container element in your template.

❌ Error: license key is invalid

  • Make sure your trial or production license key is correct and up to date.

❌ CE.SDK assets not loading

  • Check network requests. Ensure you allow access to cdn.img.ly.

Next Steps#

You’ve successfully integrated CE.SDK into your existing Angular project! Here’s what you can do next: