Unable to create static image map

[style-x7]

[Issue] Getting the following errors from chrome console (debug mode): "ERROR TypeError: Cannot read property 'getCode' of null at Object.ol.proj.getTransformFromProjections (ol.js:6170) at Object.ol.proj.getTransform (ol.js:6155) at Object.ol.proj.transform (ol.js:6251)"

[.ts file] `export class AppComponent { public zoom = 12; public opacity = 1.0;

extent: [0, 0, 1024, 968];

po: olx.ProjectionOptions = {
    code: 'xkcd-image',
    units: 'pixels',
    extent: [0, 0, 1024, 968]
}

projection = new proj.Projection(this.po);

}`

[.html file] `<aol-map [width]="'80%'" [height]="'100%'">

<aol-view [zoom]="zoom">
    <aol-coordinate [x]="103" [y]="103" [srid]="'IMAGE'"></aol-coordinate>
</aol-view>

<aol-layer-image [opacity]="opacity" [extent]="extent">
    <aol-source-imagestatic [url]="'https://imgs.xkcd.com/comics/online_communities.png'" [projection] = "projection" [imageExtent] = "extent">
        <aol-attributions>
            <aol-attribution>&copy; <a href="http://xkcd.com/license.html">xkcd</a></aol-attribution>
        </aol-attributions>
    </aol-source-imagestatic>      
</aol-layer-image>

`

Kindly pls assist (a working example will do wonders for me :) and also if I want to reference internal image, what do I put for [url] ?

Thanks in advance.

[aymeric-duchein]

With almost a year of delay (for everybody still wondering), this should work :

Html:

<aol-map [width]="'100%'" [height]="'100%'">
      <aol-view [projection]="projection" [zoom]="2" [center]="[512, 484]">
      </aol-view>
      <aol-layer-image [opacity]="opacity" [extent]="extent">
        <aol-source-imagestatic [url]="'https://imgs.xkcd.com/comics/online_communities.png'" [projection]="projection" [imageExtent]="extent">
        </aol-source-imagestatic>
      </aol-layer-image>
  </aol-map>

TS file:

import { Component } from '@angular/core';
import { extent, proj } from 'openlayers';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  public zoom = 5;
  public opacity = 1.0;
   extent: ol.Extent = [0, 0, 1024, 968];

  po: olx.ProjectionOptions = {
    code: 'xkcd-image',
    units: 'pixels',
    extent: [0, 0, 1024, 968]
  }

  projection = new proj.Projection(this.po);

  getCenter = ext =>  extent.getCenter(ext)
}

[mablae]

I am facing the same issue. I am using v next7 und angular 7.2