Image.getState Is Not A Function (when Using Ol In Angular)

I tried to implement the following code in an angular(4) application

But it always results in an error when trying to launch the browser.

First of all, my imports( both libraries were installed locally from npm):


import OlMap from 'ol/map';
import OlView from 'ol/view';
import OlLayerVector from 'ol/layer/vector';
import OlLayerTile from 'ol/layer/Tile';
import OlSourceOSM from 'ol/source/OSM';
import OlLayerImage from 'ol/layer/image';
import OlSourceImageVector from 'ol/source/imagevector';
import OlSourceImageStatic from 'ol/source/ImageStatic';
import OlProjection from 'ol/proj/projection';
import OlSourceVector from 'ol/source/vector';
import OlBaseImage from 'ol/imagebase';
import OlImage from 'ol/image';

import OlSourceGeoImage from 'ol-ext/source/GeoImage';
import OlAttribution from 'ol/attribution';
import OlOverlay from 'ol/overlay';`

Please find the code I used below : (this part properly works) `

// OSM tiles as background
    var OSMBackground = new OlLayerTile({
        source: new OlSourceOSM()
// Custom extend used to position my factoryBackgroundLayer image
    var newExtent = OlProj.transformExtent(
        [2.385083, 48.817463, 2.386024, 48.817694],
        "EPSG:4326", "EPSG:3857"

    var factoryBackgroundLayer = new OlLayerImage({
        source: new OlSourceImageStatic({
            url: '',
            // projection: projection,
            // imageExtent: extent
            projection: 'EPSG:27700',
            imageExtent: newExtent

    var map = new OlMap({
        layers: [OSMBackground
            , factoryBackgroundLayer

        target: 'map',
        view: new OlView({
            center: OlProj.fromLonLat([2.585487, 48.817561]),
            zoom: 20, // Set to 20 is better

And then I attempted to display a georeferenced image : `

x = 274764.75;
y = 6243935.64;
sx = 0.589;
sy = 0.597;
xmin = 0;
ymin = 0;
xmax = 5526;
ymax = 5000;
rotate = 7.44;
opacity = 0.7;

var geoSource = new OlSourceGeoImage(
            url: '',
            imageCenter: [this.x, this.y],
            imageScale: [,],
            imageCrop: [this.xmin, this.ymin, this.xmax, this.ymax],
            imageRotate: this.rotate * Math.PI / 180,
            projection: 'EPSG:27700',

    var geoimg = new OlLayerImage(
            state: "ready",

            opacity: 0.7,
            source: geoSource,
            imageExtent: newExtent


It always resulted in the same issue :

ERROR TypeError: image.getState is not a function at _ol_renderer_canvas_ImageLayer_._ol_renderer_Layer_.loadImage (layer.js:114) at _ol_renderer_canvas_ImageLayer_.prepareFrame (imagelayer.js:160) at _ol_renderer_canvas_Map_.renderFrame (map.js:183) at _ol_Map_._ol_PluggableMap_.renderFrame_ (pluggablemap.js:1180) at _ol_Map_.eval (pluggablemap.js:87) at ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:4740) at ZoneDelegate.invokeTask (zone.js:420) at Zone.runTask (zone.js:188) at ZoneTask.invokeTask (zone.js:496)

So regarding this report I tried to use a ol.source.Image object instead of url but not more successful.

Has anyone been using this framework before ? Any idea of an ol update that would have created this issue ?

PS: I've also tried SnapGuides lines example ( and it went properly well so ol-ext API integration sounds good !



Problem solved thanks to the author : :

"I've found an issue with the GeoImage source: the getImage() function overwrite the Image source function. Just change it to getGeoImage() solves the problem. I've pushed a new commit on master branch. If you're using npm just replace the source/GeoImage.js in the node module with the one of the git. It will be included in the next version."

By the way, I add to replace GeoImage.js from node_modules directory with the one commited by Viglino.