search

swimlane / ngx-charts

:bar_chart: Declarative Charting Framework for Angular
https://swimlane.github.io/ngx-charts/
MIT License
4.29k stars 1.15k forks source link

Error: StaticInjectorError(AppServerModule)[TooltipService -> InjectionService]: #975

Open bostjanpisler opened 5 years ago

bostjanpisler commented 5 years ago

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

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.

arjun-rao commented 5 years ago

This is happening to me too.

bostjanpisler commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

muradm commented 5 years ago

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 commented 5 years ago

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:

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

priyesh9875 commented 5 years ago

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

ashishpCACTUS commented 5 years ago

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 commented 4 years ago

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

mtpultz commented 3 years ago

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