Uncaught TypeError: t.rgb is not a function

I created an angular application, built it, and am attempting to serve it

$ ng serve --prod --aot 

This results in the following error in the console

Uncaught TypeError: t.rgb is not a function
    at HO (color.js.pre-build-optimizer.js:227)
    at GO (color.js.pre-build-optimizer.js:232)
    at rgb.js.pre-build-optimizer.js:36
    at RH (ramp.js.pre-build-optimizer.js:4)
    at Module.zUnb (BrBG.js.pre-build-optimizer.js:16)
    at f (bootstrap:78)
    at Object.0 (index.js.pre-build-optimizer.js:26)
    at f (bootstrap:78)
    at t (bootstrap:45)
    at Array.r [as push] (bootstrap:32)

The application does not display

When I build the application without minifying (the --prod flag) it works.

I am only seeing this issue when using D3

D3 ^5.9.1 . Angular version 7.3.9 . typescript 3.2.4

I have tried many binations of versions with no luck.

It also runs successfully when I pass --optimization=false I have been unable to debug this so far. This is very similar to this question however the solutions does not apply to this situation

Please let me know if any additional information would be useful.

Uncaught TypeError: t.rgb is not a function

I created an angular application, built it, and am attempting to serve it

$ ng serve --prod --aot 

This results in the following error in the console

Uncaught TypeError: t.rgb is not a function
    at HO (color.js.pre-build-optimizer.js:227)
    at GO (color.js.pre-build-optimizer.js:232)
    at rgb.js.pre-build-optimizer.js:36
    at RH (ramp.js.pre-build-optimizer.js:4)
    at Module.zUnb (BrBG.js.pre-build-optimizer.js:16)
    at f (bootstrap:78)
    at Object.0 (index.js.pre-build-optimizer.js:26)
    at f (bootstrap:78)
    at t (bootstrap:45)
    at Array.r [as push] (bootstrap:32)

The application does not display

When I build the application without minifying (the --prod flag) it works.

I am only seeing this issue when using D3

D3 ^5.9.1 . Angular version 7.3.9 . typescript 3.2.4

I have tried many binations of versions with no luck.

It also runs successfully when I pass --optimization=false I have been unable to debug this so far. This is very similar to this question however the solutions does not apply to this situation

Please let me know if any additional information would be useful.

• javascript
• angular
• d3.js

• can you forward your code with github, I had just a lot of problems with the build flag without --aot and normally the problem is inside angular, or the dependencies. Could you upload your package.json or your angular so I can see the proper error with the code? – mtorreblanca Commented Oct 22, 2019 at 2:10
• At the very least could someone explain why my question was closed but this one was not? – johnchase Commented Oct 22, 2019 at 16:02
• @johnchase where you able to resolve this ? I am also running into a similar issue when trying to use d3 with Angular 8 in production mode – maxkart Commented Nov 17, 2019 at 18:29
• 3 @johnchase thanks .. in my case seems like the minor version for D3 and Angular 8 had some issues. Bumping it to the latest versions solved it for me. – maxkart Commented Nov 19, 2019 at 6:14
• 2 Sure, please find the versions here stackoverflow./questions/58898594/… – maxkart Commented Nov 20, 2019 at 7:17

2 Answers 2

Update your version of @angular-devkit/build-angular (just found it here).

I have downgraded the version of d3 to 4.13.0 instead of 5.9.2.

npm install [email protected]

The issue is d3-color.

Hope it helped.