Can't bind to 'ngif' since it isn't a known property of 'span'

Question

I have created a Hybrid app using ngUpgrade and am currently going through my directives upgrading them to Angular components.

I have ran into this issue and cannot seem to fix it

Can't bind to 'ngif' since it isn't a known property of 'span'

Most answers on SO say to include CommonModule or BrowserModule within the parent Module, and whilst this worked for other components I have upgraded, it curiously hasnt worked for this one

Note if I remove *ngIf the component renders correctly, it only fails when I try to use *ngIf

Here is my module definition

import { CommonModule } from "@angular/common";
import { NgModule } from "@angular/core";
import { DashboardBoxSmallComponent } from "./dashboard/dashboardBoxSmall.component";
import { MiscDirectivesModule } from "./_misc/_misc.directives.module";
import { VehicleDirectivesModule } from "./_vehicle/_vehicle.directives.module";

@NgModule({
    imports: [
        CommonModule,
        MiscDirectivesModule,
        VehicleDirectivesModule
    ],
    entryComponents: [
        DashboardBoxSmallComponent
    ],
    declarations: [
        DashboardBoxSmallComponent
    ]
})
export class DirectivesModule {
    constructor() {
    }
}

The component.ts itself

import { Component, Input } from "@angular/core";
import "./dashboardBoxSmall.component.scss";

@Component({
    selector: "dashboard-box-small",
    template: require("./dashboardBoxSmall.component.html")
})
export class DashboardBoxSmallComponent {
    @Input() boxIcon: string;
    @Input() boxIconClass: string;
    @Input() boxTitle: string;
    @Input() boxSubtitle: string;

    // ---

    constructor() {

    }
}

The HTML

<div class="ml-10 layout-column overflow-hidden">
    <div class="bold font-size-14">
        <ng-content></ng-content>
        <span *ngIf="boxTitle">{{boxTitle}}</span>
    </div>

    <div class="text-muted font-size-11">{{boxSubtitle}}</div>
</div>

Have you tried re-running ng serve after doing these changes, a lot of the time module import changes won't get picked up properly withotu a restart. — Alex, Feb 09 '21 at 14:16
Hi @Alex, sorry I forgot to mention that this is a custom webpack script (as I am still running hybrid with AngularJS). Having said that I just restarted it just to make sure and it still didn't work. — Chris, Feb 09 '21 at 15:46

score 1 · Answer 1 · answered Feb 09 '21 at 16:25

Turns out that the clue was in the error message... it said "ngif" not "ngIf".

Initially I thought that was just how Angular error messages work, but then it dawned on me that my webpack configuration may be inadvertently transforming HTML to lowercase (why?).

Turns out this was correct, I had to add an option to html-loader to prevent it transforming to lowercase.

{
    test: /\.html$/,
    loader: 'html-loader',
    options: { minimize: true, caseSensitive: true }
},

Can't bind to 'ngif' since it isn't a known property of 'span'

1 Answers1