無法綁定到“ngif”，因為它不是“span”的已知屬性

Question

我已經使用 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>

Answer 1

原來線索在錯誤消息中......它說“ngif”而不是“ngIf”。

最初我以為這就是 Angular 錯誤消息的工作原理，但后來我意識到我的 webpack 配置可能無意中將 HTML 轉換為小寫（為什么？）

事實證明這是正確的，我不得不向html-loader添加一個選項以防止它轉換為小寫。

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