angular 5 integration errors

[levinzz]

I setup ol-cesium 2.0.0 in my angular 5 app along with cesium 1.47.0 and ol 5.0.2.

To make it work, I had to change some files as follows :

.angular-cli.json :

 {
          "glob": "**/*",
          "input": "../node_modules/cesium/Build/Cesium",
          "output": "./assets/cesium"
        },
        {
          "glob": "**/*",
          "input": "../node_modules/ol-cesium/dist",
          "output": "./"
        }
      "styles": [
        "../node_modules/cesium/Build/Cesium/Widgets/widgets.css",
        "../node_modules/ol-cesium/dist/olcs.css"
      ],
      "scripts": [        
        "../node_modules/Cesium/Build/Cesium/Cesium.js",
        "../node_modules/ol-cesium/dist/olcesium.js"
      ],

main.ts:

Cesium.buildModuleUrl.setBaseUrl('/assets/cesium/'); // If youre using Cesium version >= 1.42.0 add this line

typings.d.ts:

declare var Cesium;

and used it as follows:

import OLCesium from 'ol-cesium/';
//Create my map here
const ol3d = new OLCesium({ map: map }); 
ol3d.setEnabled(true);

The globe is created with my objects and a map layer on it but I get the following two errors in the console :

Uncaught TypeError: Cannot read property 'inherits' of undefined
    at Object../src/olcs/RasterSynchronizer.js (scripts.bundle.js:150473)
    at __webpack_require__ (scripts.bundle.js:147239)
    at Object../src/olcs/OLCesium.js (scripts.bundle.js:149507)
    at __webpack_require__ (scripts.bundle.js:147239)
    at Object../src/index.library.js (scripts.bundle.js:147329)
    at __webpack_require__ (scripts.bundle.js:147239)
    at scripts.bundle.js:147288
    at scripts.bundle.js:147291
    at webpackUniversalModuleDefinition (scripts.bundle.js:147218)
    at scripts.bundle.js:147219

Uncaught TypeError: Cannot read property 'viewState' of undefined
    at eval (BingMaps.js:199)
    at Function../src/olcs/core/OLImageryProvider.js.exports.createCreditForSource (olcesium.js:4803)
    at exports../src/olcs/core/OLImageryProvider.js.exports.handleSourceChanged_ (olcesium.js:4789)
    at BingMaps.eval (olcesium.js:4667)
    at BingMaps.boundListener (events.js:41)
    at BingMaps.EventTarget.dispatchEvent (EventTarget.js:96)
    at BingMaps.Observable.changed (Observable.js:61)
    at BingMaps.Source.setState (Source.js:197)
    at BingMaps.handleImageryMetadataResponse (BingMaps.js:225)
    at window.(anonymous function) (webpack-internal:///./node_modules/ol/net.js:39:5)

What's going on?

[gberaudo]

Hi @levinzz,

It looks like you are using the dist file which is not tested.

Since you are using ES6 modules already, I would suggest you use directly the sources as done in https://github.com/openlayers/ol-cesium#as-an-es6-library.

[levinzz]

Thanks @gberaudo, however I think I'll need a bit more details.

Your link eventually points to this example which relies on webpack.config to configure the build aspects. However in Angular, we don't have access to webpack.config, unless we break update compatibility.

That's why I initially used this config method to integrate Cesium. Now I need a clue on how to integrate ol-cesium, from its source instead of the dist file.

[gberaudo]

@levinzz, how do you deal with OpenLayers?

[levinzz]

I use it as described here

1. Add ol package to the project with a package manager
2. Import and use where necessary. No additional config needed

[gberaudo]

Have you tried doing the same for OL-Cesium?

[levinzz]

So I removed the ol-cesium lines from .angular-cli.

but I still get one of the two issues :

Uncaught TypeError: Cannot read property 'viewState' of undefined
    at eval (BingMaps.js:199)
    at Function../src/olcs/core/OLImageryProvider.js.exports.createCreditForSource (olcesium.js:4803)
    at exports../src/olcs/core/OLImageryProvider.js.exports.handleSourceChanged_ (olcesium.js:4789)
    at BingMaps.eval (olcesium.js:4667)
    at BingMaps.boundListener (events.js:41)
    at BingMaps.EventTarget.dispatchEvent (EventTarget.js:96)
    at BingMaps.Observable.changed (Observable.js:61)
    at BingMaps.Source.setState (Source.js:197)
    at BingMaps.handleImageryMetadataResponse (BingMaps.js:225)
    at window.(anonymous function) (webpack-internal:///./node_modules/ol/net.js:39:5)

[gberaudo]

There is a known bug about dynamic attributions, see https://github.com/openlayers/ol-cesium/pull/600.

[illsio]

Any luck with the new packages? Can anybody provide an example please?