Ngx-charts: Error: StaticInjectorError(AppServerModule)[TooltipService -> InjectionService]:

[BostjanPisler]

I'm submitting a ... (check one with "x")

• [x] bug report - search github for a similar issue or PR before submitting
• [ ] feature request
• [ ] support request - use StackOverflow (add the ngx-charts tag) or the gitter chat for support questions

Current behavior
When running angular 6 app with universal the server side code reports the mentioned injector error. It doesn't break the app tho.

ERROR { Error: Uncaught (in promise): Error: StaticInjectorError(AppServerModule)[TooltipService -> InjectionService]:
  StaticInjectorError(Platform: core)[TooltipService -> InjectionService]:
    NullInjectorError: No provider for InjectionService!

For now I stopped this error by putting an ngIf on the html element to only show if platform is browser.

Expected behavior

Reproduction of the problem

What is the motivation / use case for changing the behavior?

Please tell us about your environment:
Using angular universal express setup and ngx-charts-bar-vertical-2d in html template.

• ngx-charts version: 9.0.0

• Angular version: 6.1.0

• Browser: terminal

• Language: Typescript

[arjun-rao]

This is happening to me too.

[BostjanPisler]

One option would be to now include tooltip if it's disabled but this is probably impossible because the service has to be injected before the property is read.

Maybe there is a way to mock the injection service?

[jcjobin]

One option would be to now include tooltip if it's disabled but this is probably impossible because the service has to be injected before the property is read.

Maybe there is a way to mock the injection service?

Have you found a way around this for now? I am using ngx-graph to display a flow chart, but everytime I load the flow diagram in prod it gives the Injection error. Although in development it doesn't fail.

[msalemSIT]

Having the same issue here .. anyone found a solution to this issue so far? It only runs in normal development mode, Dev on AOT, and on production fails.

For my case, i solved it for now by reverting to older versions of both ngx-charts and ngx-graph, i used the same versions that are in the stackblitz demo: https://stackblitz.com/edit/ngx-graph-simple-example

"@swimlane/ngx-graph": "4.1.1",
"@swimlane/ngx-charts": "7.3.0"

I'm keeping it this way until we at least figure out what broke between those 2 versions.

[romainpurchla]

I have same problem.
My workaround for that is used this --aot=false --build-optimizer=false for build in prod.

[muradm]

I suppose it is related to #18. As it seems that there is a packaging issue. If you look at exception stack traces below, at runtime is running on umds, however as per #18, there seems to be some problem with packaging, as @swimlane/ngx-charts/release/index.js is not used, instead @swimlane/ngx-charts/release/esm.js is used, which as per workaround fixable with additional transpilation step.

When not bundled yet:

ERROR { Error: StaticInjectorError(AppServerModule)[TooltipService -> InjectionService]: 
  StaticInjectorError(Platform: core)[TooltipService -> InjectionService]: 
    NullInjectorError: No provider for InjectionService!
    at NullInjector.get (node_modules/@angular/core/bundles/core.umd.js:3288:23)
    at resolveToken (node_modules/@angular/core/bundles/core.umd.js:3533:28)
    at tryResolveToken (node_modules/@angular/core/bundles/core.umd.js:3477:20)
    at StaticInjector.get (node_modules/@angular/core/bundles/core.umd.js:3374:24)
    at resolveToken (node_modules/@angular/core/bundles/core.umd.js:3533:28)
    at tryResolveToken (node_modules/@angular/core/bundles/core.umd.js:3477:20)

When bundled all-in-one with webpack:

ERROR { Error: StaticInjectorError(AppServerModule)[TooltipService -> InjectionService]: 
  StaticInjectorError(Platform: core)[TooltipService -> InjectionService]: 
    NullInjectorError: No provider for InjectionService!
    at NullInjector.get (dist/apps/backend/main.js:3662:19)
    at resolveToken (dist/apps/backend/main.js:3907:24)
    at tryResolveToken (dist/apps/backend/main.js:3851:16)
    at StaticInjector.get (dist/apps/backend/main.js:3748:20)
    at resolveToken (dist/apps/backend/main.js:3907:24)

[muradm]

After hours of battle, it seems to be definitely packaging issue. Porting @swimlane/ngx-charts to ng-packagr solves this issue, #18 and tons of other (and potential) issues :)

@marjan-georgiev, porting to ng-packagr seems to be not so complex, with minimum code changes, may be should be considered? why not?

So far to make it working in my case:

• project layout (not code layout)
• imports of d3-* to d3
• documentation annotations are not compatible comments which are mostly empty and removable
• in few places imports to where defined
• fixes:
  
  
  
  • undefined early references
  
  
  • window reference
  
  

Everything else works out of the box including tests, demo app etc. without any notable changes to user.

[priyesh9875]

@muradm Can you create new/fork repo with your mentioned changes

[ashishpCACTUS]

Hi @muradm : I am still facing this issue. You have mentioned steps to move ngx-charts to ng-packagr. But not sure we are following all the steps correctly. Is it possible you can provide your codebase of how you achieved the same ?

[eplatzek]

This resolved my issue:
https://github.com/swimlane/ngx-graph/issues/145#issuecomment-461361021

[mtpultz]

I'm having this issue in ngx-charts v16.0 using Ionic 5 with Angular 10. Using the solution above doesn't work.