angular - Angular 組み込みディレクティブが機能しない (ngClass、ngStyle、ngIf)

Question

ここから組み込み属性と構造ディレクティブを適用するためのテンプレート構文セクションに従っていますhttps://v4.angular.io/guide/template-syntax#ngclass

currentClasses: {};
    setCurrentClasses() {
    // CSS classes: added/removed per current state of component properties
    this.currentClasses =  {
    'saveable': this.canSave,
    'modified': !this.isUnchanged,
    'special':  this.isSpecial
  };
}

上記の Angular のドキュメントに従って、html に currentClasses を追加します。

<div [ngClass]="currentClasses">This div is initially saveable, unchanged, and special</div>

ブラウザのコンソールで、次のエラーが表示されます。

エラー: テンプレート解析エラー: 'div' の既知のプロパティではないため、'ngclass' にバインドできません。

ngStyle と ngIf も試しましたが、同じエラー コードが表示されました。

私の app.module.ts には Common Module が含まれていますが、これはいくつかの回答で提案された解決策でしたが、これは役に立ちませんでした:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { AppComponent } from './app.component';
import { MaterialModule } from './material-module';
import { HighlightDirective } from './highlight.directive';

import { BrowserAnimationsModule } from '@angular/platform 
browser/animations';
import { PlatformModule } from '@angular/cdk/platform';
import { BreakpointObserver, MediaMatcher } from '@angular/cdk/layout';

// import { MediaService } from './Media.service';

@NgModule({
  declarations: [
    AppComponent,
    HighlightDirective
  ],
  imports: [
    CommonModule,
    BrowserModule,
    BrowserAnimationsModule,
    MaterialModule,
    PlatformModule  
  ],
  providers: [BreakpointObserver, MediaMatcher],
  bootstrap: [AppComponent]
})

export class AppModule { }

私は自分でそれを作品にすることができませんでした。また、同様の質問に対して与えられた他の回答に従っても、うまくいきませんでした。

Angular 4.4.6 と webpack を使用してコンパイルしています。

助けてくれてありがとう。