2

I have been scratching my head for last one day on this. I am using Ngx-Toastr package in my angular application. Below are the points which I think help you understand the problem.

  1. In dev server (ng serve) I didn't get any error there was no Nullinjector problem, then I make a production build using the following command (ng build). Until this point everything works fine. Now I need to optimize the bundle size so I ran this (ng build --prod). Build was successful no error Now it's time to serve the code (I am using Node server to serve this). Here the problem starts -

  2. First it's asking for

'NullInjectorError: No provider for ToastrService'

which is coming from the Ngx-Toastr Package it self and It makes sense so I add that service to the appmodules and also in other Lazy loaded modules in the providers array. So after this the error has gone . But next is what I want to talk about -

  1. Next it is asking for 'NullInjectorError: No provider for Overlay!' So I though there must be this service from the package which needs to be added in the providers array. So I tried to import it from the package it self and to add it in the providers array like below:

import { Overlay } from 'ngx-toastr/overlay/overlay';;

doing so got the below error

Module not found: Error: Can't resolve 'ngx-toastr/overlay/overlay'

  1. Next I tried searching for this problem and found some stackoverflow solutions which suggest to add the following line:

import {OverlayModule} from '@angular/cdk/overlay';

I added this module in the imports array of every modules. Nothing got changed.

Now I have no clue what to import and where to import. And I am also not sure whether I am going right or not or where should I start looking into it. I also doubt that this error is coming from that package or what!! cause It should work without implicitly importing those services.

I run the following command to get the error ahead of production build:

ng serve --prod --optimization=false

Please also mention how to debug the following error, sometime after production build we get error like this which is undoubtly makes no sense:

ERROR Error: "StaticInjectorError[t -> t]: StaticInjectorError(Platform: core)[t -> t]: NullInjectorError: No provider for t!"

I hope my explanation makes some sense to you. Thanks for your time and sorry for this long question.

Lastly FYI : I have already removed node-modules and re-installed it.

Souradip
  • 111
  • 1
  • 10

1 Answers1

2

Make sure you're using a version of ngx-toastr compatible with your version of angular and typescript. https://github.com/scttcper/ngx-toastr#dependencies

ngx-toastr v13 requires angular >= 10

Alice Oualouest
  • 836
  • 12
  • 20
scttcper
  • 41
  • 3
  • Thanks for your answer. I have now installed the suitable package but getting the same NullInjector error. Is there any way to check other packages compatibility with the Angular version? someone might have mistakenly installed a wrong version of some other packages. And what is the best way to debug this kind of error. Now I am running my project with optimization being set to false in angular.json but that causing me a big bundle size. Thanks for your time – Souradip Aug 19 '20 at 03:42
  • when you don't have a package-lock or node modules, the first time you install npm should list any warnings with peer dependencies – scttcper Aug 19 '20 at 20:35