Using Cesium with Angular

General
1

I tried to use cesium in my angular project but i always get the same errors

ERROR in ./node_modules/cesium/Source/Core/Resource.js
Module not found: Error: Can’t resolve ‘http’ in ‘C:\CloudApp\CityGuide\node_modules\cesium\Source\Core’
ERROR in ./node_modules/cesium/Source/Core/Resource.js
Module not found: Error: Can’t resolve ‘https’ in ‘C:\CloudApp\CityGuide\node_modules\cesium\Source\Core’
ERROR in ./node_modules/cesium/Source/Core/Resource.js
Module not found: Error: Can’t resolve ‘zlib’ in ‘C:\CloudApp\CityGuide\node_modules\cesium\Source\Core’

2

@muhammedalilevent you need to provide a custom webpack configuration for this. Check out the following resources:

1 Like
3

thanks for the reply I’ll try and then let you know :slight_smile:

4

I’ve already tried this resources and I got nothing :frowning:

5

Could you please provide a reproduction in Stackblitz or GitHub to have a look?

6

I wish I could bu it’s my coorps. product so I am not permitted to share :frowning:
but still thanks for your interest

1 Like
7

@muhammedalilevent if you are now using Angular 12 that comes with Webpack 5 support, the approach with the extra webpack configuration file will not work. It needs to be modified as follows:

module.exports = {
  resolve: {
    fallback: {
      fs: "empty",
      Buffer: false,
      http: "empty",
      https: "empty",
      zlib: "empty"
    }
  },
  module: {
    unknownContextCritical: false
  }
};

I hope that helps :blush:

8

Hi, is it possible to describe every passage to make Cesium work with Angular?
It’s two days I’m trying all the suggestions here, but still have the same error with webpack.
Using now Angular v14.2.6
What I have done is installing latest custom-webpack:
npm install --save-dev @angular-builders/custom-webpack@^14.0.1

then create the ‘extra-webpack.config.js’ file and put inside:

module.exports = {
  resolve: {
    fallback: {
      fs: "empty",
      Buffer: false,
      http: "empty",
      https: "empty",
      zlib: "empty"
    }
  },
  module: {
    unknownContextCritical: false
  }
};
9

@spiderdab have you modified the angular.json file of your project to use the custom webpack configuration? You need to set it into the builder property of the build and serve architect entries as shown here.

I hope that helps :grinning: