title: Angular app is not rendering anything
body: <p>Angular.io newb here (I know AngularJS!). My app was rendering stuff before, but now it's compiling, but rendering nothing.</p>
  
  <p>I have the following index.html file:</p>
  
  <pre><code>&lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;SumanChromeExtension&lt;/title&gt;
    &lt;base href="/dist/"&gt;
  
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
    &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  
  &lt;app-header&gt;&lt;/app-header&gt;
  
  &lt;app-root&gt;&lt;/app-root&gt;
  
  &lt;app-footer&gt;&lt;/app-footer&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>the following main.ts file:</p>
  
  <pre><code>import {enableProdMode} from '@angular/core';
  import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import {AppModule} from './app.module';
  import {environment} from './environments/environment';
  declare var chrome;
  
  if (environment.production) {
    enableProdMode();
  }
  
  platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err =&gt; console.log(err));
  
  window.addEventListener('message', function (ev: Event) {
    console.log('extension received event:', ev);
  });
  </code></pre>
  
  <p>the following app.module.ts file:</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import {MatButtonModule, MatCheckboxModule} from '@angular/material';
  import { AppHeader } from './app/header/header.component';
  import { AppComponent } from './app/pages/home/app.component';
  
  
  @NgModule({
    declarations: [
      AppHeader,
      AppComponent
    ],
    imports: [
      MatButtonModule,
      MatCheckboxModule,
      BrowserModule,
      BrowserAnimationsModule,
    ],
    providers: [],
    bootstrap: [
      AppHeader,
      AppComponent
    ]
  })
  
  
  
  export class AppModule { }
  </code></pre>
  
  <p>app.component.ts looks like:</p>
  
  <pre><code>import {Component} from '@angular/core';
  
  declare var chrome;
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  
  export class AppComponent {
    title = 'Suman Test Generator';
  
    constructor() {
      console.log('constructor was called.');
    }
  
  }
  </code></pre>
  
  <p>and header.component.ts looks like:</p>
  
  <pre><code>import {Component} from '@angular/core';
  
  declare var chrome;
  
  @Component({
    selector: 'app-header',
    templateUrl: './header.component.html',
    styleUrls: ['./header.component.css']
  })
  
  export class AppHeader {
    title = 'Suman Test Generator 4';
  
    constructor() {
      console.log('constructor was called.');
    }
  }
  </code></pre>
  
  <p>it was rendering stuff before, but now the rendered html looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/pxuuq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pxuuq.png" alt="enter image description here"></a></p>
  
  <p>So nothing is being rendered. I am sure it's a simple problem, anyone know? Like I said it is building without any errors, so.</p>
  
  <p>Actually I checked the console, and I have these errors:</p>
  
  <pre><code>compiler.js:24660 Uncaught Error: Template parse errors:
  Can't bind to 'mdMenuTriggerFor' since it isn't a known property of 'button'. ("
      &lt;span&gt;App Name&lt;/span&gt;
      &lt;span class="example-spacer"&gt;&lt;/span&gt;
      &lt;button md-button [ERROR -&gt;][mdMenuTriggerFor]="appMenu"&gt;
        &lt;md-icon&gt;menu&lt;/md-icon&gt;
        Menu
  "): ng:///AppModule/AppHeader.html@6:22
  'md-icon' is not a known element:
  1. If 'md-icon' is an Angular component, then verify that it is part of this module.
  2. If 'md-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
      &lt;span class="example-spacer"&gt;&lt;/span&gt;
      &lt;button md-button [mdMenuTriggerFor]="appMenu"&gt;
        [ERROR -&gt;]&lt;md-icon&gt;menu&lt;/md-icon&gt;
        Menu
      &lt;/button&gt;
  "): ng:///AppModule/AppHeader.html@7:6
  'md-toolbar' is not a known element:
  1. If 'md-toolbar' is an Angular component, then verify that it is part of this module.
  2. If 'md-toolbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
  &lt;div&gt;
  
    [ERROR -&gt;]&lt;md-toolbar color="primary"&gt;
      &lt;span&gt;App Name&lt;/span&gt;
      &lt;span class="example-spacer"&gt;&lt;/span&gt;
  "): ng:///AppModule/AppHeader.html@3:2
  There is no directive with "exportAs" set to "mdMenu" ("
      &lt;/button&gt;
    &lt;/md-toolbar&gt;
    &lt;md-menu [ERROR -&gt;]#appMenu="mdMenu"&gt;
      &lt;button md-menu-item&gt; Settings&lt;/button&gt;
      &lt;button md-menu-item&gt; Contact&lt;/but"): ng:///AppModule/AppHeader.html@11:11
  'md-menu' is not a known element:
  1. If 'md-menu' is an Angular component, then verify that it is part of this module.
  2. If 'md-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
      &lt;/button&gt;
    &lt;/md-toolbar&gt;
    [ERROR -&gt;]&lt;md-menu #appMenu="mdMenu"&gt;
      &lt;button md-menu-item&gt; Settings&lt;/button&gt;
      &lt;button md-menu-item&gt; Con"): ng:///AppModule/AppHeader.html@11:2
      at syntaxError (compiler.js:485)
      at TemplateParser.webpackJsonp.../../../compiler/esm5/compiler.js.TemplateParser.parse (compiler.js:24660)
      at JitCompiler.webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._parseTemplate (compiler.js:34471)
      at JitCompiler.webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._compileTemplate (compiler.js:34446)
      at compiler.js:34347
      at Set.forEach (&lt;anonymous&gt;)
      at JitCompiler.webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._compileComponents (compiler.js:34347)
      at compiler.js:34217
      at Object.then (compiler.js:474)
      at JitCompiler.webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:34216)
  </code></pre>