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

Question

我已经使用ngUpgrade创建了一个混合应用程序，目前正在执行我的指令，将它们升级为角组件。

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

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

上面的大多数答案都说要在父模块中包含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>

Answer 1

原来线索就在错误信息里..。它说的是"ngIf“而不是"ngif”。

一开始，我以为这只是角度错误信息的工作方式，但后来我突然意识到，我的webpack配置可能无意中将HTML转换为小写(为什么？)

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

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