Material design component "is not a known element" in Angular2

Question

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.

When I insert a button into the template like this <md-button>foo</md-button> the application starts crashing with this console message

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. ("<h1>Job</h1>[ERROR ->]<md-button>material</md-button>"): JobComponent@0:12     at TemplateParser.parse (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:8321:21) 

So, it might sound like it is case 1 in the message, but I have tried the advice given in this answer to add MdButton to the imports property of my NgModule (which already contained MaterialModule.forRoot() as adviced by the documentation) , but if I do, the whole application goes blank without errors in the console.

Here is some of the relevant 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(() => 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"]); 

Answer 1

It should be

<button md-button>foo</button>    

OR

<button md-raised-button>foo</button>