0

Why am I getting "can't bind to... since it isn't a known property of ... error" in the production with Angular 4 + webpack?

The version of Angular is 4.1.3 and webpack version is 2.6.1. In my local there is no problem. Everything works well. In the production, I m uploading required files comes from "npm run build" to the weblogic. Then I m facing the errors like:

Unhandled Promise rejection: Template parse errors: Can't bind to 'ngclass' since it isn't a known property of 'div'.

Can't bind to 'ngif' since it isn't a known property of 'div'. ("i [blocked]=notifier.blocked [target]=pnl> ] ngif="session && session.activeUser">

My dependencies: My dependencies

Webpack versions:Webpack versions

I have tried this: Can't bind to 'ngIf' since it isn't a known property of 'div'. (" and added browsermodule but still not working in prod.

There is no problem with typin:

<div class="ui-grid" *ngIf="session && session.activeUser">
<model-dialog-component #modelDialog [contentFactory]='modelDialogContentFactory'></model-dialog-component>
<div class="ui-grid-row">
    <div class="ui-grid-col-12">
        <div class='headers'>
            <div class='header'>
                <div id='logo'>
                    <span routerLink='home'><img [src]='logoPath' /></span>
                    <div class='mobile-nav' [ngClass]="acln ? 'op':'hd'" (click)='mnav($event)'>
                        <i class='icon-menu'></i>
                    </div>
Neil Lunn
  • 148,042
  • 36
  • 346
  • 317
ahmetesat
  • 31
  • 3
  • 1
    It's because you write them bad. ngif is `*ngIf`, ngclass is `[ngClass]`. Mind how you write it, it's very important. –  Jun 09 '17 at 11:57
  • Can you edit your question with how you use these directives? – eko Jun 09 '17 at 11:57

1 Answers1

2

I've solved issue by making minimize=false in the webpack.prod.js. Like this:

new webpack.LoaderOptionsPlugin({
        options: {
            htmlLoader: {
                minimize: false
            }
        }
    }),
ahmetesat
  • 31
  • 3