1

I have followed the install instructions for angular2-mdl using the angular2-cli and I think everything is setup properly, the components I tested render and function correctly. I then tried getting the application layout sorted and componentized but ran into an issue.

When using the mdl-layout-header tag I get the following error in the console:

zone.js:140 Uncaught TypeError: Cannot read property 'name' of undefined

Currently my app.component.html has the following structure

<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>

My nav-bar.component.html has the following structure

<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>

If I remove the mdl-layout-header tag the error goes away, but the header too.

If it helps in my app.module.ts I did import and include the MdlModule and I have included the required css files, no other imports specific to angular2-mdl have been done.

Any help would be greatly appreciated!

Thanks for the all the work that has been done so far!

Edit: I am currently using angular-cli version 1.0.0-beta.16 and angular2-mdl version 1.8.1.

My app.module.ts looks as follows:

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 { }
Andre Calitz
  • 11
  • 2
  • which versions (angular-cli, angular2-mdl) are you using? – michael Oct 05 '16 at 17:37
  • and a code snippet of your AppModule would be great – michael Oct 05 '16 at 20:33
  • I have added the requested information to the post – Andre Calitz Oct 06 '16 at 06:46
  • I can't see any problems with this comfiguration. Please have a look at this project https://github.com/fit-4-angular-2/course-menu/tree/master/ (it uses the same versions of angular-cli and angular2-mdl) and check that you have the right imports in the polyfil.ts file and the right versions of zone and core-js (package.json) – michael Oct 06 '16 at 12:56
  • Thanks for having a look I really appreciate it! I'll have a look at that project and also on my side to see if I can see anything different. – Andre Calitz Oct 06 '16 at 16:04
  • I have tested everything over a few times and could not get the error to go away. Eventually I tested in Safari and the error was not present, so it seems it only happens in Chrome – Andre Calitz Oct 07 '16 at 11:03
  • have you cleared the browser cache in chrome? i have never seen that something works only in safari or in chrome. – michael Oct 07 '16 at 11:39

0 Answers0