title: Material design component "is not a known element" in Angular2
body: <p>I have a hybrid Angular1 and Angular2 application. In one of the Angular2 components that I route to, I want to use a Material Design Button.</p>
  
  <p>When I insert a button into the template like this <code>&lt;md-button&gt;foo&lt;/md-button&gt;</code> the application starts crashing with this console message</p>
  
  <pre><code>Error: Template parse errors:
  'md-button' is not a known element:
  1. If 'md-button' is an Angular component, then verify that it is part of this module.
  2. If 'md-button' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("&lt;h1&gt;Job&lt;/h1&gt;[ERROR -&gt;]&lt;md-button&gt;material&lt;/md-button&gt;"): JobComponent@0:12
      at TemplateParser.parse (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:8321:21)
  </code></pre>
  
  <p>So, it might sound like it is case 1 in the message, but I have tried the advice given in <a href="https://stackoverflow.com/questions/38928063/angular2-material-md-button-error">this answer</a> to add <code>MdButton</code> to the <code>imports</code> property of my <code>NgModule</code> (which already contained <code>MaterialModule.forRoot()</code> as adviced by <a href="https://github.com/angular/material2/blob/master/GETTING_STARTED.md" rel="noreferrer">the documentation</a>) , but if I do, the whole application goes blank without errors in the console.</p>
  
  <p>Here is some of the relevant code</p>
  
  <pre><code>import { UIRouterModule } from "ui-router-ng2";
  import { Ng1ToNg2Module, uiRouterNgUpgrade } from "ui-router-ng1-to-ng2";
  
  import { MaterialModule, MdButton } from '@angular/material';
  
  
  const upgradeAdapter: UpgradeAdapter = new UpgradeAdapter(
      forwardRef(() =&gt; XamFlowNg2Module));
  
  uiRouterNgUpgrade.setUpgradeAdapter(upgradeAdapter);
  
  angular.module("xamFlow")
      .factory("consoleService",
      upgradeAdapter.downgradeNg2Provider(ConsoleService));
  
  
  /*
   * Expose our ng1 content to ng2
   */
  upgradeAdapter.upgradeNg1Provider("restService");
  
  @NgModule({
      declarations: [
          JobComponent,
      ],
      entryComponents: [
          // Components that are routed to must be listed here, otherwise you'll get "No Component Factory"
          JobComponent,
      ],
      imports: [
          CommonModule,
          BrowserModule,
          FormsModule,
          HttpModule,
          Ng1ToNg2Module,
          MaterialModule.forRoot()
      ],
      providers: [
          ConsoleService,
          ImageService
      ]
  })
  class MyModule { }
  
  
  upgradeAdapter.bootstrap(document.body, ["myApp"]);
  </code></pre>