无法绑定到“ngif”，因为它不是“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>

Answer 1

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 }
},