Use es6 import with cesium and angular

CesiumJS
1

Hello,

As I stated in a previous post, I update cesium to 1.7 in my angular 9 project.
I was using @types from cesium, and I now switched to the built in typing from cesium module.

The problem I face is this, in angular 9 importing cesium do not work.
If I improt anything from cesium like import { Color } from 'cesium';

at build time I will get thrown the following

WARNING in ./node_modules/cesium/Source/Core/buildModuleUrl.js 52:12-19
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

WARNING in ./node_modules/cesium/Source/Core/buildModuleUrl.js 80:25-32
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

WARNING in ./node_modules/cesium/Source/Core/buildModuleUrl.js 106:14-21
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

ERROR in ./node_modules/cesium/Source/Core/Resource.js
Module not found: Error: Can’t resolve ‘http’ in ‘D:\Crocsx\Documents\Repository\UIDEV-9\node_modules\cesium\Source\Core’
ERROR in ./node_modules/cesium/Source/Core/Resource.js
Module not found: Error: Can’t resolve ‘https’ in ‘D:\Crocsx\Documents\Repository\UIDEV-9\node_modules\cesium\Source\Core’
ERROR in ./node_modules/cesium/Source/Core/Resource.js
Module not found: Error: Can’t resolve ‘zlib’ in ‘D:\Crocsx\Documents\Repository\UIDEV-9\node_modules\cesium\Source\Core’

caused by the following

  // Note: only the 'json' and 'text' responseTypes transforms the loaded buffer
  /* eslint-disable no-undef */
  var URL = require("url").parse(url);
  var http = URL.protocol === "https:" ? require("https") : require("http");
  var zlib = require("zlib");
  /* eslint-enable no-undef */

Is there any way to bypass those error

2

I think you may need to use import Cesium from 'cesium/Cesium'; or get a single module with import Color from 'cesium/core/Color'; as suggested here:

Let me know if this works for you.

3

@Crocsx_Gaming

  • To suppress warnings, you need to extend the configuration of the webpack that Angular CLI currently uses. Since this is not feasible, you need to use a custom webpack builder. Check out how we do it in https://github.com/Developer-Plexscape/cesium-angular-example and let me know if you have any difficulties.

  • For the part of the error try to add the cesium types in your tsconfig.app.json file, if you have not done yet as:

    "compilerOptions": {
  "outDir": "./out-tsc/app",
  "types": ["cesium"]
}
4

hey i also get this error and i checked your git repo but still i get the same error and most of our projects part are equal need help :’(

5

@muhammedalilevent could you please provide a reproduction through a GitHub repo or a Stackblitz demo using Troubleshooting Cesium and Angular apps

6

I have exactly the same errors but only with cesium 1.97.0 !
It still works well with the 1.96.0.
(i 'm using angular 12)

7

As said by sanjeetsuhag in Add `sideEffects` field to `package.json` by ggetz · Pull Request #10714 · CesiumGS/cesium · GitHub
It works with and @angular-builders/custom-webpack, with this extra webpack config :

module.exports = {
resolve: {
fallback: {
http: false,
https: false,
zlib: false,
}
},
};