Невозможно выполнить привязку к «ngIf», так как это неизвестное свойство «md-card-title».

Я изучаю Angular2 RC5 с библиотеками материалов Angular2 и запускаю его в AspNetCore 1.0 приложении, используя VisualStudio 2015.. Я взял отлично работающее Angular2 RC5 одностраничное приложение и попытался ввести ленивую загрузку, при которой сначала загружается только страница входа. Когда я успешно вошел в систему, я хочу загрузить оставшиеся страницы.

Когда я нажимал кнопку входа в режим SPA, я успешно перенаправлялся на страницу DashboardComponent, которая была предварительно загружена со страницей входа — это было до того, как я ввел ленивую загрузку. После выполнения этого руководства теперь я получаю эти ошибки

Фрагмент кода ошибки

EXCEPTION: Error: Uncaught (in promise): Template parse errors: Can't bind      to 'ngIf' since it isn't a known property of 'md-card-title'.
1. If 'md-card-title' is an Angular component and it has 'ngIf' input, then verify that it is part of this module.
2. If 'md-card-title' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.  ("


        <md-card-title [ERROR ->]*ngIf="!showMessage && !isApproved">
            Please use the information below...
        </md-card-title> "): ReportListComponent@63:23 Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "directives" section. ("

Почему вдруг не работает директива ngIf? Это работало до того, как я переместил панель инструментов, чтобы загрузить ленивую публикацию об успешном входе в систему.

Я прошел весь путь, пока не использовал подход с общими модулями в ссылке, которую я разместил выше. Не является ли использование общих модулей причиной этой проблемы? Я предположил, что совместное использование модулей — это способ очистить код, а не повторять вещи, когда все работает, и не более того.

Моя информационная панель похожа на страницу HeroesList в ссылке, которую я перехожу выше, где она загружает еще несколько страниц в ту минуту, когда загружается DashboardModule. Я поставил точки останова на странице Dashboard на стороне MVC и подтвердил, что Dashboard и последующие страницы загружаются лениво только при успешном входе в систему.

Ошибка выглядит так, как будто она не может получить ссылку на основные угловые ссылки и/или библиотеки материалов angular2. Я поместил все эти импорты, перечисленные здесь, во все модули, которые будут иметь их, кроме модулей маршрутизации.

import { NgModule }         from '@angular/core';
import { FormsModule } from '@angular/forms';

import { BrowserModule } from '@angular/platform-browser';
import { HttpModule }    from '@angular/http';
import { RouterModule } from '@angular/router';

import { MdRadioModule } from '@angular2-material/radio';
import { MdToolbarModule } from '@angular2-material/toolbar';
import { MdButtonModule } from '@angular2-material/button';
import { MdIconModule } from '@angular2-material/icon';
import { MdProgressBarModule } from '@angular2-material/progress-bar';
import { MdListModule } from '@angular2-material/list';
import { MdInputModule } from '@angular2-material/input';
import { MdCardModule } from '@angular2-material/card';

Тем не менее я получаю ошибки, как в приведенном выше фрагменте. Что я мог упустить? Любая помощь или советы приветствуются.

ИЗМЕНИТЬ

Dashboard.Module.ts

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


import { HttpModule }    from '@angular/http';
import { RouterModule } from '@angular/router';

import { MdRadioModule } from '@angular2-material/radio';
import { MdToolbarModule } from '@angular2-material/toolbar';
import { MdButtonModule } from '@angular2-material/button';
import { MdIconModule } from '@angular2-material/icon';
import { MdProgressBarModule } from '@angular2-material/progress-bar';
import { MdListModule } from '@angular2-material/list';
import { MdInputModule } from '@angular2-material/input';
import { MdCardModule } from '@angular2-material/card';

import { AppService } from './app.service';

import { DashboardRoutingModule }  from './Dashboard-routing.Module';

@NgModule({
    imports: [  
                CommonModule, HttpModule, FormsModule, RouterModule, 
                MdRadioModule, MdToolbarModule, MdProgressBarModule,
                MdButtonModule, MdIconModule, MdListModule,
                MdCardModule, MdInputModule, MdToolbarModule,
                DashboardRoutingModule],
  /*declarations: [  DashboardComponent ],*/
  exports:      [  CommonModule  ],
  providers:    [ AppService ]
})
export class DashboardModule { }

DashBoardComponent.ts

import { Component }   from '@angular/core';

import { AppService } from './app.service';

@Component({

  template: `
    <router-outlet></router-outlet>
  `
})
export class DashboardComponent {
  userName = '';
  constructor(service: AppService) {
    //this.userName = service.userName;
  }
}

dashboard-routing.Module.ts

import { NgModule }            from '@angular/core';
import { Routes, RouterModule }        from '@angular/router';

import { FormsModule } from '@angular/forms';
import { CommonModule }     from '@angular/common';
import { HttpModule }    from '@angular/http';

import { MdRadioModule } from '@angular2-material/radio';
import { MdToolbarModule } from '@angular2-material/toolbar';
import { MdButtonModule } from '@angular2-material/button';
import { MdIconModule } from '@angular2-material/icon';
import { MdProgressBarModule } from '@angular2-material/progress-bar';
import { MdListModule } from '@angular2-material/list';
import { MdInputModule } from '@angular2-material/input';
import { MdCardModule } from '@angular2-material/card';


import { DashboardComponent } from './DashBoardComponent';
import { ReportListComponent }  from './ReportListComponent';
import { ReportDetailComponent }  from './ReportDetailComponent';


const routes: Routes = [
  { 
    children: [
      { path: 'Home/ReportList',    component: ReportListComponent },
      { path: 'Home/ReportDetail/:reportId', component: ReportDetailComponent }
    ]
  }
];


@NgModule({
    imports: [RouterModule.forChild([routes])  
    ],
  declarations: [ DashboardComponent, ReportListComponent, ReportDetailComponent ],
  exports: [RouterModule, ReportListComponent, ReportDetailComponent, CommonModule]
})


export class DashboardRoutingModule {}