Skip to main content

Getting Started - Angular

Getting started integration tutorial

Supported Angular Versions#

The PhotoEditorSDK will work in any Angular version with Typescript 3.x or higher. Angular version 6 and below use Typescript 2.x which is incompatible with the typings for the PhotoEditorSDK and will cause Typescript related compiler errors.

The only option to run v5 of the PhotoEditorSDK in the older versions of Angular would be to disable the library type checks in the compilerOptions of the tsconfig.json.

{
  "compilerOptions": {
    "skipLibCheck": true
  }
}

Let's get started!#

Free Trial#

Our tech is modified to be used for testing purposes without a license key. To start testing just follow this Get Started guide and leave out the step of entering the commercial license keys. The editor will simply render a watermark over the preview and final results. And in case you need any technical assistance, make sure to reach out to us: https://img.ly/support. We’ll be glad to help.

We will be using angular cli for simplicity.

Create a project#
  • Start a new project by following the angular cli prompts

ng new my-app
cd my-app
ng serve
  • Then open http://localhost:4200/ to see your app.
Installing peer dependencies#

PhotoEditor SDK needs following peer dependencies:

  1. React >= 16.8.6
  2. React DOM >= 16.8.6
  3. Styled Components >= 4.4
  • Run npm install --save react react-dom styled-components to include them in the project.
  • Run npm install --save-dev @types/react @types/react-dom to include the types in the project.
  • Add "allowSyntheticDefaultImports": true to the compilerOptions in tsconfig.json in order to compile React.
Installing PhotoEditor SDK#
  • Run npm install --save photoeditorsdk.
  • Copy the contents from node_modules/photoeditorsdk/assets to src/assets/photoeditorsdk.
Creating an Editor component#

Use the angular cli to generate the scaffold for your editor component.

ng generate component photo-editor

In contrast to the other frameworks, the editor needs to be imported from the photoeditorsdk/no-polyfills entry point in Angular to avoid polyfill conflicts.

photo-editor.component.ts#
import {
  Component,
  AfterViewInit,
  ViewChild,
  Input,
  ElementRef,
} from '@angular/core';
import { PhotoEditorSDKUI, EditorApi } from 'photoeditorsdk/no-polyfills';

const license = '';

@Component({
  selector: 'app-photo-editor',
  templateUrl: './photo-editor.component.html',
})
export class PhotoEditorComponent implements AfterViewInit {
  @Input()
  public src: string;

  @ViewChild('psdkContainer')
  private container: ElementRef;

  public editor: EditorApi;

  ngAfterViewInit() {
    this.initEditor();
  }

  async initEditor() {
    try {
      if (this.editor) {
        this.editor.dispose();
      }

      this.editor = await PhotoEditorSDKUI.init({
        license,
        container: this.container.nativeElement,
        image: this.src,
        assetBaseUrl: '/assets/photoeditorsdk',
      });
    } catch (error) {
      console.log(error);
    }
  }
}
photo-editor.component.html#
<div #psdkContainer style="width: 100vw; height: 100vh;"></div>
Add the component to the app#
app.component.html#
<app-photo-editor
  src="https://img.ly/static/libraries/unsplash/raw/PZAxzN5DPkc.jpg"
></app-photo-editor>
Add the necessary polyfills for IE11#

This step is no longer required for Angular 11 or above.

The easiest option would be to let core-js@3.x polyfill all stable ES and web standards:

polyfills.ts#
// Polyfill only stable `core-js` features - ES and web standards:
import 'core-js/stable';

It is also possible to only polyfill the necessary features by installing react-app-polyfill:

polyfills.ts#
// Polyfills Promise, fetch, Object.assign, Symbol, Set, Map
import 'react-app-polyfill/ie11';
// Loads core-js/stable, regenerator-runtime
import 'react-app-polyfill/stable';
import 'core-js/features/array/find';
import 'core-js/features/array/map';

Add the following snippet to the polyfills.ts if you encounter this error message process is not defined:

(window as any).process = {
  env: { DEBUG: undefined },
};
AngularJS and IE11#

The photoeditorsdk needs to be transpiled for ES5 in order to work in IE11. You will require a browserlist file or entry in the package.json and the following snippet in your babel coniguration.

{
  test: /\.js$/,
  use: {
    loader: "babel-loader",
    options: {
      presets: [["@babel/preset-env"]],
      plugins: [
        [
          "@babel/plugin-transform-runtime",
          {
            regenerator: true,
          },
        ],
      ],
    },
  },
  include: [path.resolve(__dirname, "node_modules/photoeditorsdk")],
}

CORS#

If you are loading images from external sources (e.g. from an AWS bucket), you need to first configure Cross-Origin Resource Sharing for both the server and the image. Otherwise, you will see errors such asFailed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at [...] may not be loaded.or Unable to get image data from canvas because the canvas has been tainted.

Please follow the instructions on how to properly configure CORS here.

Ready to go!#

There you have it. PhotoEditor SDK for the Web is ready to use. Refer to the configuration documentaion for more configuration options.