v. 17.0.1: TypeError: Cannot read properties of undefined (reading 'config')

[kle-pra]

In version 17.0.1 there seems to be an error when using Toastr.

Steps to replicate:

In AppModule we import it:

  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    BrowserAnimationsModule,
    ToastrModule.forRoot(),
  ],

In some component we inject and use Toastr service :

...
constructor(private readonly toastr: ToastrService) { }`

  ngOnInit(): void {
    this.toastr.success("test")
  }

Angular animations depdendency "@angular/animations": "^16.0.1", is intalled and included in package.json
We get an error in browser console:

main.ts:11 TypeError: Cannot read properties of undefined (reading 'config')
    at new Toast (ngx-toastr.mjs:653:41)
    at NodeInjectorFactory.Toast_Factory [as factory] (ngx-toastr.mjs:636:12)
    at getNodeInjectable (core.mjs:4618:44)
    at createRootComponent (core.mjs:13172:35)
    at ComponentFactory.create (core.mjs:13037:25)
    at DomPortalHost.attachComponentPortal (ngx-toastr.mjs:277:41)
    at DomPortalHost.attach (ngx-toastr.mjs:83:21)
    at OverlayRef.attach (ngx-toastr.mjs:354:33)
    at ToastrService._buildNotification (ngx-toastr.mjs:603:35)
    at ToastrService._preBuildNotification (ngx-toastr.mjs:564:21)
    at ToastrService.success (ngx-toastr.mjs:471:21)
    at WelcomeComponent.ngOnInit (welcome.component.ts:55:17)
    at callHookInternal (core.mjs:3804:14)
    at callHook (core.mjs:3831:13)
    at callHooks (core.mjs:3786:17)
    at executeInitAndCheckHooks (core.mjs:3736:9)
    at refreshView (core.mjs:12417:21)
    at refreshEmbeddedViews (core.mjs:12513:17)
    at refreshView (core.mjs:12426:9)
    at refreshEmbeddedViews (core.mjs:12513:17)
    at refreshView (core.mjs:12426:9)
    at refreshComponent (core.mjs:12549:13)
    at refreshChildComponents (core.mjs:12596:9)
    at refreshView (core.mjs:12452:13)
    at detectChangesInternal (core.mjs:12344:9)
    at RootViewRef.detectChanges (core.mjs:12874:9)
    at ApplicationRef.tick (core.mjs:27250:22)
    at core.mjs:27410:41
    at _ZoneDelegate.invoke (zone.js:368:26)
    at Object.onInvoke (core.mjs:26117:33)
    at _ZoneDelegate.invoke (zone.js:367:52)
    at Zone.run (zone.js:127:43)
    at NgZone.run (core.mjs:25971:28)
    at Object.next (core.mjs:27409:27)
    at ConsumerObserver.next (Subscriber.js:91:33)
    at SafeSubscriber._next (Subscriber.js:60:26)
    at SafeSubscriber.next (Subscriber.js:31:18)
    at Subject.js:34:30
    at errorContext (errorContext.js:19:9)
    at EventEmitter_.next (Subject.js:27:21)
    at EventEmitter_.emit (core.mjs:22632:15)
    at checkStable (core.mjs:26039:35)
    at Object.onHasTask (core.mjs:26134:21)
    at _ZoneDelegate.hasTask (zone.js:422:37)
    at _ZoneDelegate._updateTaskCount (zone.js:443:22)
    at Zone._updateTaskCount (zone.js:270:34)
    at Zone.runTask (zone.js:188:30)
    at drainMicroTaskQueue (zone.js:581:35)

Same errors also happens in component test. Toastr service and module are provided in tests bed (among other dependencies):

 await TestBed.configureTestingModule({
            declarations: [WelcomeComponent],
            imports: [ToastrModule.forRoot(), ...],
            providers: [ToastrService, ...],
            schemas: [NO_ERRORS_SCHEMA],
        }).compileComponents();

ERROR msg:

 An error was thrown in afterAll
  TypeError: Cannot read properties of undefined (reading 'config')
      at new Toast (http://localhost:9876/_karma_webpack_/webpack:/node_modules/ngx-toastr/fesm2022/ngx-toastr.mjs:653:41)

...

Same code & tests works ok in version 16.*

Any idea what is wrong?

Error seems to point to line 653 ngx-toastr.mjs which seem so be animation related: easeTime: this.toastPackage.config.easeTime,

Extra info about my system:

Angular CLI: 16.0.1
Node: 18.16.0
Package Manager: npm 9.5.1
OS: linux x64

Angular: 16.0.1
... animations, cli, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1600.1
@angular-devkit/build-angular   16.0.1
@angular-devkit/core            16.0.1
@angular-devkit/schematics      16.0.1
@schematics/angular             16.0.1
rxjs                            7.8.1
typescript                      5.0.4

Best regards

[SiarheiBokuts]

i have the same issue.

in this line this.toastPackage.config.easeTime this.toastPackage is null

[kle-pra]

ToastNoAnimationModule module seems to work, but since BrowserAnimationsModule from @angular/animations are also imported, ToastrModule should work.

There seemy to be an issue with animations wth ToastrModule.

[github-actions]

🎉 This issue has been resolved in version 17.0.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀