# Using Cesium with Angular

**URL:** <https://community.cesium.com/t/using-cesium-with-angular/13359>\
**Category:** General\
**Created:** [April 26, 2021, 9:04am UTC](https://community.cesium.com/t/using-cesium-with-angular/13359 "2021-04-26T09:04:19Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![muhammedalilevent](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/muhammedalilevent/32/4805_2.png) [@muhammedalilevent](https://community.cesium.com/u/muhammedalilevent)\
**Post date:** [April 26, 2021, 9:04am UTC](https://community.cesium.com/t/using-cesium-with-angular/13359/1 "2021-04-26T09:04:19Z")

</div>

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’

---

<div class="post-metadata">

**Author:** ![Aristeidis\_Bampakos](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/aristeidis_bampakos/32/2013_2.png) [@Aristeidis\_Bampakos](https://community.cesium.com/u/Aristeidis_Bampakos)\
**Post date:** [April 26, 2021, 1:12pm UTC](https://community.cesium.com/t/using-cesium-with-angular/13359/2 "2021-04-26T13:12:20Z")

</div>

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

- [Can’t build angular project with Cesium 1.67 (regression?) · Issue #8673 · CesiumGS/cesium (github.com)](https://github.com/CesiumGS/cesium/issues/8673)

- [cesium-angular-example/extra-webpack.config.js at master · Developer-Plexscape/cesium-angular-example (github.com)](https://github.com/Developer-Plexscape/cesium-angular-example/blob/master/extra-webpack.config.js)

---

<div class="post-metadata">

**Author:** ![muhammedalilevent](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/muhammedalilevent/32/4805_2.png) [@muhammedalilevent](https://community.cesium.com/u/muhammedalilevent)\
**Post date:** [May 17, 2021, 10:31am UTC](https://community.cesium.com/t/using-cesium-with-angular/13359/3 "2021-05-17T10:31:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![muhammedalilevent](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/muhammedalilevent/32/4805_2.png) [@muhammedalilevent](https://community.cesium.com/u/muhammedalilevent)\
**Post date:** [May 17, 2021, 10:33am UTC](https://community.cesium.com/t/using-cesium-with-angular/13359/4 "2021-05-17T10:33:50Z")

</div>

I’ve already tried this resources and I got nothing ☹

---

<div class="post-metadata">

**Author:** ![Aristeidis\_Bampakos](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/aristeidis_bampakos/32/2013_2.png) [@Aristeidis\_Bampakos](https://community.cesium.com/u/Aristeidis_Bampakos)\
**Post date:** [May 17, 2021, 11:17am UTC](https://community.cesium.com/t/using-cesium-with-angular/13359/5 "2021-05-17T11:17:33Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![muhammedalilevent](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/muhammedalilevent/32/4805_2.png) [@muhammedalilevent](https://community.cesium.com/u/muhammedalilevent)\
**Post date:** [May 17, 2021, 12:11pm UTC](https://community.cesium.com/t/using-cesium-with-angular/13359/6 "2021-05-17T12:11:18Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Aristeidis\_Bampakos](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/aristeidis_bampakos/32/2013_2.png) [@Aristeidis\_Bampakos](https://community.cesium.com/u/Aristeidis_Bampakos)\
**Post date:** [June 4, 2021, 12:12pm UTC](https://community.cesium.com/t/using-cesium-with-angular/13359/7 "2021-06-04T12:12:19Z")

</div>

@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:

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

```

I hope that helps 😊

---

<div class="post-metadata">

**Author:** ![spiderdab](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/spiderdab/32/11120_2.png) [@spiderdab](https://community.cesium.com/u/spiderdab)\
**Post date:** [October 13, 2022, 8:20am UTC](https://community.cesium.com/t/using-cesium-with-angular/13359/8 "2022-10-13T08:20:04Z")

</div>

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:

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

```

---

<div class="post-metadata">

**Author:** ![Aristeidis\_Bampakos](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/aristeidis_bampakos/32/2013_2.png) [@Aristeidis\_Bampakos](https://community.cesium.com/u/Aristeidis_Bampakos)\
**Post date:** [October 14, 2022, 7:37am UTC](https://community.cesium.com/t/using-cesium-with-angular/13359/9 "2022-10-14T07:37:14Z")

</div>

@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](https://github.dev/Developer-Plexscape/cesium-angular-example/blob/master/angular.json).

I hope that helps 😀