Angular 2 notifications runtime error in Angular2-Rc.5 webpack using ng build --prod
See original GitHub issueThe app works when on localhost:4200, but when using
ng build --prod
command to build the application to production mode, I get the following error at the runtime:
polyfills.c27b87b….bundle.js:1 Unhandled Promise rejection: Template parse errors:
Can't bind to 'item' since it isn't a known property of 'simple-notification'.
1. If 'simple-notification' is an Angular component and it has 'item' input, then verify that it is part of this module.
2. If 'simple-notification' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
("<simple-notification
*ngFor="let a of notifications; let i = index"
[ERROR ->][item]="a"
[timeOut]="timeOut"
[clickToClose]="clickToClose"
"): t@4:16
Can't bind to 'timeOut' since it isn't a known property of 'simple-notification'.
1. If 'simple-notification' is an Angular component and it has 'timeOut' input, then verify that it is part of this module.
2. If 'simple-notification' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
(" *ngFor="let a of notifications; let i = index"
[item]="a"
[ERROR ->][timeOut]="timeOut"
[clickToClose]="clickToClose"
[maxLength]="maxLen"): t@5:16
Can't bind to 'clickToClose' since it isn't a known property of 'simple-notification'.
1. If 'simple-notification' is an Angular component and it has 'clickToClose' input, then verify that it is part of this module.
2. If 'simple-notification' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
("
[item]="a"
[timeOut]="timeOut"
[ERROR ->][clickToClose]="clickToClose"
[maxLength]="maxLength"
[showProgressBa"): t@6:16
Can't bind to 'maxLength' since it isn't a known property of 'simple-notification'.
1. If 'simple-notification' is an Angular component and it has 'maxLength' input, then verify that it is part of this module.
2. If 'simple-notification' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
("
[timeOut]="timeOut"
[clickToClose]="clickToClose"
[ERROR ->][maxLength]="maxLength"
[showProgressBar]="showProgressBar"
[pauseOnH"): t@7:16
Can't bind to 'showProgressBar' since it isn't a known property of 'simple-notification'.
1. If 'simple-notification' is an Angular component and it has 'showProgressBar' input, then verify that it is part of this module.
2. If 'simple-notification' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
(" [clickToClose]="clickToClose"
[maxLength]="maxLength"
[ERROR ->][showProgressBar]="showProgressBar"
[pauseOnHover]="pauseOnHover"
[th"): t@8:16
Can't bind to 'pauseOnHover' since it isn't a known property of 'simple-notification'.
1. If 'simple-notification' is an Angular component and it has 'pauseOnHover' input, then verify that it is part of this module.
2. If 'simple-notification' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
(" [maxLength]="maxLength"
[showProgressBar]="showProgressBar"
[ERROR ->][pauseOnHover]="pauseOnHover"
[theClass]="theClass"
[rtl]="rtl"
"): t@9:16
Can't bind to 'theClass' since it isn't a known property of 'simple-notification'.
1. If 'simple-notification' is an Angular component and it has 'theClass' input, then verify that it is part of this module.
2. If 'simple-notification' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
(" [showProgressBar]="showProgressBar"
[pauseOnHover]="pauseOnHover"
[ERROR ->][theClass]="theClass"
[rtl]="rtl"
[animate]="animate"
"): t@10:16
Can't bind to 'rtl' since it isn't a known property of 'simple-notification'.
1. If 'simple-notification' is an Angular component and it has 'rtl' input, then verify that it is part of this module.
2. If 'simple-notification' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
(" [pauseOnHover]="pauseOnHover"
[theClass]="theClass"
[ERROR ->][rtl]="rtl"
[animate]="animate"
[position]="i"
"): t@11:16
Can't bind to 'animate' since it isn't a known property of 'simple-notification'.
1. If 'simple-notification' is an Angular component and it has 'animate' input, then verify that it is part of this module.
2. If 'simple-notification' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
("
[theClass]="theClass"
[rtl]="rtl"
[ERROR ->][animate]="animate"
[position]="i"
[icons]="icons"
"): t@12:16
Can't bind to 'position' since it isn't a known property of 'simple-notification'.
1. If 'simple-notification' is an Angular component and it has 'position' input, then verify that it is part of this module.
2. If 'simple-notification' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
("
[rtl]="rtl"
[animate]="animate"
[ERROR ->][position]="i"
[icons]="icons"
>
"): t@13:16
Can't bind to 'icons' since it isn't a known property of 'simple-notification'.
1. If 'simple-notification' is an Angular component and it has 'icons' input, then verify that it is part of this module.
2. If 'simple-notification' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
("
[animate]="animate"
[position]="i"
[ERROR ->][icons]="icons"
>
</simple-notification>
"): t@14:16 ; Zone: <root> ; Task: Promise.then ; Value: e {message: "Template parse errors:↵Can't bind to 'item' since … >↵ </simple-notification>↵"): t@14:16", stack: "Error: Template parse errors:↵Can't bind to 'item'…/polyfills.c27b87b9e504b84ce8dc.bundle.js:2:4680)"}
Not sure if this error is from this package or from the angular 2 cli/webpack.
Issue Analytics
- State:
- Created 7 years ago
- Comments:7 (3 by maintainers)
Top Results From Across the Web
How to resolve angular build failure "Angular2-Notification ...
You need to update angular2-notifications to latest version.
Read more >angular2-notifications - npm
A light and easy to use notifications library for Angular 2. It features both regular page notifications (toasts) and push notifications.
Read more >Cross-platform Single Page Applications with ASP.NET Core ...
Create and configure the application: Start with an empty ASP.NET Core application and configure it step by step for using ASP.NET MVC 6....
Read more >Category: Angular - Alain Chautard
When you create a new component using CLI, it generates a sample component for you (with the class name and all of the...
Read more >angular/angular - Gitter
@Redface if you're using webpack, you'll need a custom loader for now: ... -of-a-module-angular-2-rc-5 regarding nested routes and modules.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I’m also experiencing this issue and I can confirm disabling mangle on the Uglify plugin makes it work again. This is the configuration I’m using at the moment:
@theunreal angular-cli/addon/ng2/models/webpack-build-production.ts