openlayers: Angular cli webpack prod build error

I want to build an Angular app with ol. Non production build is working but prod build results in runtime error.

Same result with Angular 6 and typescript 2.9.2

image

{
  "name": "ol-test",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~7.0.0-beta.5",
    "@angular/common": "~7.0.0-beta.5",
    "@angular/compiler": "~7.0.0-beta.5",
    "@angular/core": "~7.0.0-beta.5",
    "@angular/forms": "~7.0.0-beta.5",
    "@angular/http": "~7.0.0-beta.5",
    "@angular/platform-browser": "~7.0.0-beta.5",
    "@angular/platform-browser-dynamic": "~7.0.0-beta.5",
    "@angular/router": "~7.0.0-beta.5",
    "core-js": "^2.5.4",
    "ol": "^5.2.0",
    "rxjs": "~6.3.2",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.9.0-beta.1",
    "@angular/cli": "~7.0.0-beta.3",
    "@angular/compiler-cli": "~7.0.0-beta.5",
    "@angular/language-service": "~7.0.0-beta.5",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.3.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.1"
  }
}
import { Component } from '@angular/core';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  ngOnInit() {

    new Map({
      target: 'map',
      layers: [
        new TileLayer({
          source: new XYZ({
            url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
          })
        })
      ],
      view: new View({
        center: [0, 0],
        zoom: 2
      })
    });

  }

}

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 6
  • Comments: 19 (8 by maintainers)

Most upvoted comments

Still not working with ol v5.3.0. When a new ol version is expected?

I noticed the same error and figured out that addCommon in ol/proj is just optimized away by angular-cli in production mode. As a workaround you can import addCommon from ol/proj and call it in your initialization code but I suspect that this is just the tip of the iceberg…