Блог

Я следовал инструкциям по установке angular2-mdl с использованием angular2-cli, и я думаю, что все настроено правильно, компоненты, которые я тестировал, отображаются и функционируют правильно. Затем я попытался отсортировать и разбить макет приложения на компоненты, но столкнулся с проблемой.

При использовании тега mdl-layout-header я получаю следующую ошибку в консоли:

zone.js: 140 Неперехваченная ошибка типа: не удается прочитать свойство ‘name’ неопределенного

В настоящее время мой app.component.html имеет следующую структуру

 <mdl-layout mdl-layout-fixed-header mdl-layout-header-seamed>
   <mdl-layout-header>
      <app-nav-bar></app-nav-bar>
   </mdl-layout-header>
   <mdl-layout-content>
     <!--<router-outlet ></router-outlet>-->
     Test
   </mdl-layout-content>
</mdl-layout>
  

Мой nav-bar.component.html имеет следующую структуру

 <mdl-layout-header-row>
  <mdl-layout-title>My App</mdl-layout-title>
  <mdl-layout-spacer></mdl-layout-spacer>
  <!-- Navigation. We hide it in small screens. -->
  <nav class="mdl-navigation">
      <a class="mdl-navigation__link" >Link</a>
  </nav>
</mdl-layout-header-row>
  

Если я удалю тег mdl-layout-header, ошибка исчезнет, но заголовок тоже.

Если это помогает в моем app.module.ts, я импортировал и включил MdlModule, и я включил необходимые css-файлы, никакого другого импорта, специфичного для angular2-mdl, не было сделано.

Любая помощь будет принята с благодарностью!

Спасибо за всю работу, которая была проделана до сих пор!

Редактировать: в настоящее время я использую angular-cli версии 1.0.0-beta.16 и angular2-mdl версии 1.8.1.

Мой app.module.ts выглядит следующим образом:

 import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { MdlModule } from 'angular2-mdl';

import { AppComponent } from './app.component';
import { NavBarComponent } from './nav-bar/nav-bar.component';

@NgModule({
  declarations: [
    AppComponent,
    NavBarComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MdlModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }