Can't build angular project with Cesium 1.67 (regression?)

[danieloliveira117]

I'm able to build with Angular (that uses webpack) with Cesium v1.66.

But if i upgrade to the 1.67 version, it no longer works:

ERROR in ./node_modules/cesium/Source/Core/Resource.js
Module not found: Error: Can't resolve 'http' in 'C:_dev\SWAIR\web-portal\node_modules\cesium\Source\Core'
resolve 'http' in 'C:_dev\SWAIR\web-portal\node_modules\cesium\Source\Core'
Parsed request is a module
using description file: C:_dev\SWAIR\web-portal\node_modules\cesium\package.json (relative path: ./Source/Core)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
(...)

(There's an error for the modules: http, https and zlib)

The problem was possibly created by #8560.

---

Operating System: Windows 10 Pro, build 18363
Node version: 12.16.0
Angular version: 8 (not using Ivy)

Note: I'm not using the angular-cesium lib.

[joschne]

Getting the same error with Cesium 1.67.0 imported ES6 module when running ng build with:

Angular CLI: 9.0.5
Node: 12.8.1
OS: darwin x64
Angular: 9.0.6

Using Ivy
Not using angular-cesium

Not sure if this is related to the errors I get when running ng serve (see issue #8401)

WARNING in ./node_modules/cesium/Source/Core/buildModuleUrl.js 47:110-117
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 69:31-38
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 91:107-114
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

[OmarShehata]

Thanks for reporting this. Were you able to confirm if adding back the line from #8560 resolves this issue @joschne @danieloliveira117 ?

// In Resource.js:1901
var nodeRequire = global.require; // eslint-disable-line

The demo project in angular-cesium seems to work with CesiumJS 1.67.

[mramato]

I'm fairly confident that this is a webpack configuration issue. If you look in the example demo configuration https://github.com/CesiumGS/cesium-webpack-example/blob/master/webpack.config.js you'll see the this section, instructing webpack to ignore some node libraries:

    node: {
        // Resolve node module use of fs
        fs: "empty",
        Buffer: false,
        http: "empty",
        https: "empty",
        zlib: "empty"
    },

This is because webpack isn't smart enough to know whether these requires ever get executed (in the browser they don't) so it just tries to include everything.

Are you able to update the webpack configuration to verify this is the case?

[danieloliveira117]

@mramato It worked!

@OmarShehata That demo project appears to use the newer version of angular (version 9).

I think this issue can be closed, using the fix below it appears to work for Angular 8.

---

For anyone wondering how to change the webpack config in angular you can use @angular-builders/custom-webpack (make sure to use the correct version - for angular 8 use 8.x.x).

Example configuration:

custom-webpack.config.js

module.exports = {
  node: {
    // Resolve node module use of fs
    fs: "empty",
    Buffer: false,
    http: "empty",
    https: "empty",
    zlib: "empty"
  }
};

[OmarShehata]

Thanks for confirming @danieloliveira117 !

[bampakoa]

@danieloliveira117 thanks very much for your solution. I have merged it to our Angular-Cesium example which can be found here https://github.com/Developer-Plexscape/cesium-angular-example.

@joschne I have also added the required configuration of webpack for the warnings that you mentioned. 🙏 @ggetz for your tip CesiumGS/cesium-webpack-example#6 (comment) though unknownContextRegExp was not needed.

[elanioazul]

Hi,
in my case the solution proposed didn´t work.
I have installed:
@angular/cli 10.0.8
"@angular-builders/custom-webpack": "^10.0.1",
"cesium": "^1.73.0",

Adding this to package.json is now working:
"browser": {
"fs": "empty",
"Buffer": false,
"http": "empty",
"https": "empty",
"zlib": "empty"
}

[vhive-jonathan-carse]

Make sure to update both the "build" and the "serve" parts in angular.json to use the new webpack config. I didn't need @elanioazul 's addition to package.json to ng9

"builder": "@angular-builders/custom-webpack:dev-server",
          "options": {
            "customWebpackConfig": {
              "path": "./custom-webpack.config.js",
              "mergeStrategies": {
                "externals": "replace"
              }
            }
}