13

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 combinations 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.

johnchase
  • 13,155
  • 6
  • 38
  • 64
  • 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 Oct 22 '19 at 02:10
  • At the very least could someone explain why my question was closed but [this](https://stackoverflow.com/q/50448326/3639023) one was not? – johnchase Oct 22 '19 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 Nov 17 '19 at 18:29
  • @maxkart It turns out the issue I was running into was also related to D3. I was able to resolve this in that turning off optimization allowed the app to build. However I wasn't able to get it working with optimization and D3 – johnchase Nov 18 '19 at 15:23
  • @johnchase this question was closed most likely because of "... the shortest code necessary to reproduce it". the question you mentioned survived by chance and had high probability to be closed with the same reason – ursa Nov 18 '19 at 20:38
  • 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 Nov 19 '19 at 06:14
  • Thanks @maxkart would you mind posting what exact versions of D3 and Angular are working for you? – johnchase Nov 19 '19 at 14:18
  • 2
    Sure, please find the versions here https://stackoverflow.com/questions/58898594/d3v5-angular-8-production-mode-error-typeerror-void-0-is-not-a-function/58948723#58948723 – maxkart Nov 20 '19 at 07:17
  • Did bumping to those exact versions resolve the issue? I've just done the same and it hasn't fixed it – cloakedninjas Dec 02 '19 at 14:30
  • @johnchase: is your problem is solved? If yes, could you please help me as I am getting the same error with d3V5 and angular 8.1.2. – panwar Dec 10 '19 at 15:06
  • @panwar @cloakedninjas Unfortunately using `"d3": "^5.14.2"` and Angular 8 did not solve the issue I am running into – johnchase Dec 10 '19 at 22:10
  • @johnchase: After upgrading the @angular-devkit/build-angular to "^0.803.17" works for me. You can try this. Hope it will help. – panwar Dec 11 '19 at 07:04

2 Answers2

1

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

tomerpacific
  • 4,704
  • 13
  • 34
  • 52
Ronan
  • 36
  • 3
1

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

npm install d3@4.13.0

The issue is d3-color.

Hope it helped.

Itay Ben Shmuel
  • 648
  • 7
  • 9