无法绑定到“ngif”，因为它不是“span”的已知属性

如何解决无法绑定到“ngif”，因为它不是“span”的已知属性

我使用 ngUpgrade 创建了一个混合应用程序，目前正在按照我的指令将它们升级到 Angular 组件。

我遇到了这个问题，似乎无法解决

无法绑定到 'ngif'，因为它不是 'span' 的已知属性

SO 上的大多数答案都说在父模块中包含 CommonModule 或 browserModule，虽然这适用于我升级的其他组件，但奇怪的是它不适用于这个

请注意，如果我删除 *ngIf 组件会正确呈现，它只会在我尝试使用 *ngIf 时失败

这是我的模块定义

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() {
    }
}

component.ts 本身

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() {

    }
}

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>

解决方法

原来线索在错误信息中……它说的是“ngif”而不是“ngIf”。

最初我认为这就是 Angular 错误消息的工作方式，但后来我意识到我的 webpack 配置可能会无意中将 HTML 转换为小写（为什么？）。

事实证明这是正确的，我不得不向 html-loader 添加一个选项以防止它转换为小写。

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