Ngx-toastr: Toastr not working on 9.0.0-next.4

[simon-sharp]

When using ngx-toastr 10.2.0 on Angular 9.0.0-next.4 I get the error message

`ERROR Error: "Template error: Can't bind to 'ngIf' since it isn't a known property of 'button'."

Angular 3
createUnknownPropertyError
elementPropertyInternal
property
Toast_Template ngx-toastr.js:978
`

and

ERROR Error: "Template error: Can't bind to 'ngIf' since it isn't a known property of 'div'."

I have a pretty standard installation. Does someone have any ideas on how to prevent this error?

The Toastr appears but has no text in it

[BlairUT]

I'm getting the same errors on 9.0.0-next.6

[pixeldepth]

I'm getting the same error on 8.2.7

[scttcper]

try ngx-toastr v11

[hartjo]

Still not working after using ngx-toastr v11 on angular version 8.3.4

Errors
core.js:6014 ERROR Error: Template error: Can't bind to 'ngIf' since it isn't a known property of 'button'.

core.js:6014 ERROR Error: Template error: Can't bind to 'ngIf' since it isn't a known property of 'div'.

[Coooi]

I'm facing the same issue on Angular 8.2.4.
Could this be because of Ivy ?
Any suggestions?

[Coooi]

After checking the call stack, the error occur there:

ɵngcc0.ɵɵproperty("ngIf", ctx.options.closeButton);

 ɵngcc0.ɵɵselect(1);

ɵngcc0.ɵɵproperty("ngIf", ctx.title);

ɵngcc0.ɵɵselect(2);

ɵngcc0.ɵɵproperty("ngIf", ctx.message && ctx.options.enableHtml);

ɵngcc0.ɵɵselect(3);

ɵngcc0.ɵɵproperty("ngIf", ctx.message && !ctx.options.enableHtml);

ɵngcc0.ɵɵselect(4);

ɵngcc0.ɵɵproperty("ngIf", ctx.options.progressBar);

ERROR Error: Template error: Can't bind to 'ngIf' since it isn't a known property of 'div'.

This might be because of Ivy, I guess.

[Coooi]

@scttcper Added a PR that might fix the issue: https://github.com/scttcper/ngx-toastr/pull/729

[Coooi]

@scttcper Build is green now.

[Coooi]

@scttcper I'm still facing that message when running the app with aot.

ERROR Error: "Template error: Can't bind to 'ngIf' since it isn't a known property of 'div'."

I'm going to investigate.

[simon-sharp]

That sounds as if you are missing CommonModule in your module imports

[Coooi]

@simon-sharp but I'm running the library itself, ngx-toastr, via npm start

[simon-sharp]

I don't know if is set up to do that. It might be only set up as a library and not as a runnable app. If it is set up as an App then its missing BrowserModule in the App Module. CommonModule would be used in a SubModule and is doing basically the same

[Coooi]

@simon-sharp When I use it on my project, I get the following issue on build time:

ERROR in No suitable injection token for parameter 'el' of class 'ToastContainerDirective'.

BrowserModule is in AppModule and CommonModule in my CoreModule.

Any suggestion?

[scttcper]

here's toastr working with ivy in angular 9 https://github.com/scttcper/ng-ivy-9-toastr-example

If you have an example of it not working with angular 9 please let me know.

[BlairUT]

It's still not working for me with 11.2.0. When running in debug mode (npm start) I get
core.js:13129 Can't bind to 'ngIf' since it isn't a known property of 'button'.
warnAboutUnknownProperty @ core.js:13129
elementPropertyInternal @ core.js:13034
ɵɵproperty @ core.js:22635
Toast_Template @ template.html:15
executeTemplate @ core.js:12575
refreshView @ core.js:12434
refreshComponent @ core.js:13722
refreshChildComponents @ core.js:12169
refreshView @ core.js:12493
renderComponentOrTemplate @ core.js:12547
tickRootContext @ core.js:13886
detectChangesInRootView @ core.js:13926
detectChanges @ core.js:15464
tick @ core.js:41449
(anonymous) @ core.js:41297
invoke @ zone-evergreen.js:365
onInvoke @ core.js:40081
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:124
run @ core.js:39893
next @ core.js:41294
schedulerFn @ core.js:35611
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:35573
checkStable @ core.js:40024
onLeave @ core.js:40142
onInvokeTask @ core.js:40065
invokeTask @ zone-evergreen.js:399
runTask @ zone-evergreen.js:168
invokeTask @ zone-evergreen.js:481
invokeTask @ zone-evergreen.js:1596
globalZoneAwareCallback @ zone-evergreen.js:1622
Show 6 more frames
core.js:13129 Can't bind to 'ngIf' since it isn't a known property of 'div'.
warnAboutUnknownProperty @ core.js:13129
elementPropertyInternal @ core.js:13034
ɵɵproperty @ core.js:22635
Toast_Template @ template.html:2
executeTemplate @ core.js:12575
refreshView @ core.js:12434
refreshComponent @ core.js:13722
refreshChildComponents @ core.js:12169
refreshView @ core.js:12493
renderComponentOrTemplate @ core.js:12547
tickRootContext @ core.js:13886
detectChangesInRootView @ core.js:13926
detectChanges @ core.js:15464
tick @ core.js:41449
(anonymous) @ core.js:41297
invoke @ zone-evergreen.js:365
onInvoke @ core.js:40081
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:124
run @ core.js:39893
next @ core.js:41294
schedulerFn @ core.js:35611
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:35573
checkStable @ core.js:40024
onLeave @ core.js:40142
onInvokeTask @ core.js:40065
invokeTask @ zone-evergreen.js:399
runTask @ zone-evergreen.js:168
invokeTask @ zone-evergreen.js:481
invokeTask @ zone-evergreen.js:1596
globalZoneAwareCallback @ zone-evergreen.js:1622
Show 6 more frames

When I build for production with ng build --prod I get

ERROR in ./node_modules/ngx-toastr/__ivy_ngcc__/fesm2015/ngx-toastr.js
Module build failed (from ./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js):
TypeError: Cannot read property 'kind' of undefined
at isAngularDecoratorMetadataExpression (C:\Projects\MyApp\cli-front-end\node_modules\@angular-devkit\build-optimizer\src\transforms\scrub-file.js:230:35)
at checkNodeForDecorators (C:\Projects\MyApp\cli-front-end\node_modules\@angular-devkit\build-optimizer\src\transforms\scrub-file.js:53:21)
at visitNodes (C:\Projects\MyApp\cli-front-end\node_modules\@angular-devkit\build-optimizer\node_modulestypescript\libtypescript.js:16631:30)
at Object.forEachChild (C:\Projects\MyApp\cli-front-end\node_modules\@angular-devkit\build-optimizer\node_modulestypescript\libtypescript.js:16859:24)
at transformer (C:\Projects\MyApp\cli-front-end\node_modules\@angular-devkit\build-optimizer\src\transforms\scrub-file.js:39:16)
at transformSourceFileOrBundle (C:\Projects\MyApp\cli-front-end\node_modules\@angular-devkit\build-optimizer\node_modulestypescript\libtypescript.js:67384:57)
at transformation (C:\Projects\MyApp\cli-front-end\node_modules\@angular-devkit\build-optimizer\node_modulestypescript\libtypescript.js:83586:24)
at transformRoot (C:\Projects\MyApp\cli-front-end\node_modules\@angular-devkit\build-optimizer\node_modulestypescript\libtypescript.js:83606:82)
at Object.map (C:\Projects\MyApp\cli-front-end\node_modules\@angular-devkit\build-optimizer\node_modulestypescript\libtypescript.js:499:29)
at Object.transformNodes (C:\Projects\MyApp\cli-front-end\node_modules\@angular-devkit\build-optimizer\node_modulestypescript\libtypescript.js:83593:30)
at emitJsFileOrBundle (C:\Projects\MyApp\cli-front-end\node_modules\@angular-devkit\build-optimizer\node_modulestypescript\libtypescript.js:84089:32)
at emitSourceFileOrBundle (C:\Projects\MyApp\cli-front-end\node_modules\@angular-devkit\build-optimizer\node_modulestypescript\libtypescript.js:84043:13)
at forEachEmittedFile (C:\Projects\MyApp\cli-front-end\node_modules\@angular-devkit\build-optimizer\node_modulestypescript\libtypescript.js:83832:34)
at Object.emitFiles (C:\Projects\MyApp\cli-front-end\node_modules\@angular-devkit\build-optimizer\node_modulestypescript\libtypescript.js:84026:9)
at emitWorker (C:\Projects\MyApp\cli-front-end\node_modules\@angular-devkit\build-optimizer\node_modulestypescript\libtypescript.js:89951:33)
at C:\Projects\MyApp\cli-front-end\node_modules\@angular-devkit\build-optimizer\node_modulestypescript\libtypescript.js:89912:66

[scttcper]

@BlairUT the compiling stack trace really doesn't tell us anything. Need a small repo

[Coooi]

@BlairUT I'm having the same issue with latest Angular 8.3.15.

[scttcper]

Angular 8 with ivy is never going to work with ngx-toastr they aren’t backporting fixes