Use es6 import with cesium and angular

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

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.

@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"]
    }

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 :’(

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