Angular 2 — общие директивы, такие как ngIf, ngFor, не работают

Я только начал изучать Angular 2, и я застрял на том, чтобы заставить работать общие директивы. У меня версия Angular 2.1.1, и я получаю сообщение об ошибке Can't bind to 'ngforOf' since it isn't a known property of 'li'. То же самое относится к *ngIf и другим директивам.

Некоторые из наиболее актуальных советов, которые я прочитал из подобных вопросов здесь, чтобы заставить его работать:

• 1. Make sure to use the correct spelling and casing of the directives in the view, like so ng-if should be *ngIf, etc.
• 2. Import BrowserModule in the root module and CommonModule in other modules where you want to use common directives. Link

Пока что вот части моего кода, реализующие эти предложенные исправления:

approot.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule, RequestOptions } from '@angular/http';
import { AuthRequestOptions } from '../services/auth.request.options';

import { AppComponent } from '../approot/approot.component';
import { AppRoutingModule } from './approot.routing.module';

import { DashboardModule } from '../dashboard/dashboard.module';

@NgModule({
  imports: [
    BrowserModule,
    HttpModule,
    AppRoutingModule,
    DashboardModule
  ],
  declarations: [
    AppComponent
  ],
  providers: [
    {provide: RequestOptions, useClass: AuthRequestOptions}
  ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }

dashboard.module.ts

import { NgModule }     from '@angular/core';
import { CommonModule } from '@angular/common';

import { DashboardRoutingModule } from './dashboard.routing.module';
import { DashboardComponent } from './dashboard.component';
import { DashboardHomeComponent } from './dashboard-home.component';

@NgModule({
  imports: [
    CommonModule,
    DashboardRoutingModule,
  ],
  declarations: [
    DashboardComponent,
    DashboardHomeComponent
  ],
})

export class DashboardModule { }

dashboard.component.ts (где я хочу использовать *ngFor)

import {Component} from "@angular/core";
import {ListService} from "../services/list.service";
import {ListModel} from "../models/list.model";

@Component({
  templateUrl: '/views/dashboard/views/dashboard.html',
  providers: [
    ListService
  ],
  styleUrls: ['../css/dashboard/styles/dashboard.css']
})

export class DashboardComponent {

  lists: Array<ListModel>;

  constructor (private listService: ListService) {
    this.lists = [];
  }

  ngOnInit () {
    console.log(this.lists);
    this.listService.getLists().subscribe(
      (data) => {
        this.lists = data;
        console.log(this.lists);
      }
    );
  }
}

ИЗМЕНИТЬ dashboard.html

<div class="row">
  <div class="col-sm-3 col-md-2 sidebar">
    <ul class="nav nav-sidebar">
      <li class="active">
        <a>My Lists</a>
      </li>

      <li *ngFor="let list of lists">
        <a href="#">{{list.name}}</a>
      </li>

    </ul>
  </div>
  <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <router-outlet></router-outlet>
  </div>
</div>

Я также пытался импортировать BrowserModule вместо CommonModule в dashboard.module.ts, но все равно не повезло.

Я узнал, что предыдущие бета-версии angular2 имеют атрибут directive в @Component(), и директивы должны быть объявлены там, чтобы их можно было проанализировать. Это уже устарело в текущей версии angular, и мне интересно, связано ли это с этой ошибкой, когда angular не распознает общие директивы.

Любая помощь будет очень высоко ценится.