title: Angular Material components fail tests
body: <p>I have a Sidenav Menu made in Angular. The component looks like this: </p>
  
  <p>The template:    </p>
  
  <pre><code> &lt;mat-toolbar color="primary" [fxLayoutAlign]="(settings.menuType != 'mini') ? 'space-between center' : 'center center'" class="sidenav-header"&gt;
      &lt;a mat-raised-button color="accent" routerLink="/" (click)="closeSubMenus()" class="small-logo"&gt;Menu&lt;/a&gt;
      &lt;a *ngIf="settings.menuType == 'default'" class="logo" routerLink="/" (click)="closeSubMenus()"&gt;mEMS&lt;/a&gt; 
  &lt;/mat-toolbar&gt;
  
  &lt;div fxLayout="column" fxLayoutAlign="center center" class="user-block transition-2" [class.show]="settings.sidenavUserBlock"&gt; 
      &lt;div [fxLayout]="(settings.menuType != 'default') ? 'column' : 'row'" 
           [fxLayoutAlign]="(settings.menuType != 'default') ? 'center center' : 'space-around center'" class="user-info-wrapper"&gt;
          &lt;div class="user-info"&gt;
              &lt;p class="name"&gt; {{currentUser}}&lt;/p&gt;
              &lt;p *ngIf="settings.menuType == 'default'" class="position"&gt;Rocket Scientist&lt;br&gt; &lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div *ngIf="settings.menuType != 'mini'" fxLayout="row" fxLayoutAlign="space-around center" class="w-100 muted-text"&gt;
         &lt;a mat-icon-button (click)="logout();" routerLink="/login"&gt;
              &lt;mat-icon&gt;power_settings_new&lt;/mat-icon&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="sidenav-menu-outer" class="sidenav-menu-outer" perfectScrollbar [class.user-block-show]="settings.sidenavUserBlock"&gt;    
      &lt;span *ngIf="!menuItems"&gt;loading....&lt;/span&gt;
      &lt;app-vertical-menu [menuItems]="menuItems" [menuParentId]="0"&gt;&lt;/app-vertical-menu&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>The actual Component:</p>
  
  <pre><code>import { Component, OnInit, ViewEncapsulation } from '@angular/core';
  import { AppSettings } from '../../../app.settings';
  import { Settings } from '../../../app.settings.model';
  import { MenuService } from '../menu/menu.service';
  import { AuthService } from '../../../auth.service';
  import { Router, ActivatedRoute } from '@angular/router';
  
  @Component({
    selector: 'app-sidenav',
    templateUrl: './sidenav.component.html',
    styleUrls: ['./sidenav.component.scss'],
    encapsulation: ViewEncapsulation.None,
    providers: [ MenuService ]
  })
  export class SidenavComponent implements OnInit {
  
    currentUser: String;
    public userImage= '../assets/img/users/user.jpg';
    public menuItems:Array&lt;any&gt;;
    public settings: Settings;
    constructor(public authService: AuthService, public appSettings:AppSettings, public menuService:MenuService,public router:Router,){
        this.settings = this.appSettings.settings; 
    }
  
    logout() {
      this.authService.logout();
    }
  
    ngOnInit() {
      let jwt = localStorage.getItem(AuthService.USER_TOKEN_KEY);
      let jwtData = jwt.split('.')[1]
      let decodedJwtJsonData = window.atob(jwtData)
      let decodedJwtData = JSON.parse(decodedJwtJsonData)
      console.log(decodedJwtData);
      this.currentUser = decodedJwtData.sub;
  
      this.menuItems = this.menuService.getVerticalMenuItems();
    }
  }
  </code></pre>
  
  <p>My test is the default basic one:</p>
  
  <pre><code>import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  import { SidenavComponent } from './sidenav.component';
  import { MatButtonModule, MatFormFieldModule, MatInputModule, MatRippleModule, MatCardModule, MatSidenavModule, MatToolbarModule, MatIconModule } from '@angular/material';
  
  describe('SidenavComponent', () =&gt; {
    let component: SidenavComponent;
    let fixture: ComponentFixture&lt;SidenavComponent&gt;;
  
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        declarations: [ SidenavComponent ]
      })
      .compileComponents();
    }));
  
    beforeEach(() =&gt; {
      fixture = TestBed.createComponent(SidenavComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });
  
    it('should create', () =&gt; {
      expect(component).toBeTruthy();
    });
  });
  </code></pre>
  
  <p>Every time I am running this test I am getting these errors because of Material components</p>
  
  <pre><code>Can't bind to 'fxLayoutAlign' since it isn't a known property of 'mat-toolbar'.
      1. If 'mat-toolbar' is an Angular component and it has 'fxLayoutAlign' input, then verify that it is part of this module.
      2. If 'mat-toolbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
  
  
  
      1. If 'app-vertical-menu' is an Angular component, then verify that it is part of this module.
      2. If 'app-vertical-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("-block-show]="settings.sidenavUserBlock"&gt;
          &lt;span *ngIf="!menuItems"&gt;loading....&lt;/span&gt;
  </code></pre>
  
  <p>All of the above mentioned coponents I have added into app.module.ts </p>
  
  <pre><code>import { MatButtonModule, MatFormFieldModule, MatInputModule, MatRippleModule, MatCardModule, MatSidenavModule, MatToolbarModule, MatIconModule } from '@angular/material';
  </code></pre>
  
  <p>and exported them ... so I am a bit lost, I don't understand what I am doing wrong of if I should be importing/exporting these modules differently. </p>