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"]);

Solution

It should be

<button md-button>foo</button>   

OR

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

Comments

[Klas Mellbourn]

Are you saying I can't use md- components in the html? I believe you are supposed to be able to do that. Example: github.com/kara/leashed-in/blob/master/src/app/…

[micronyks]

I think Its old way to declare button in material.

[Klas Mellbourn]

Doh, it was that simple. Thanks!

[A.W.]

On the demo page https://material.angularjs.org/latest/demo/button it is named md-button

[micronyks]

@Guus please check - github.com/angular/material2/blob/master/src/lib/button/…

[A.W.]

@micronyks thanks, the doc i mentioned is probably for angular1

[pdem]

The new component is added in "app.module.js" and it is automatic using angular cli :"ng generate component aNewComponent"

[pdem]

Additionnaly it wasn't a custom component problem, (what you describe is a custom component generation) but it helped me to search my case, I should have asked my own question :)

[Yaseen Ahmad]

i use this but i'm sending event to ts file on click when i add the active class it's does not work any help please

[micronyks]

@YaseenAhmed could you please explain your scenario in detail? hard to understand by your sentence. New question would be better...

[Florian Leitgeb]

This is not true. As you can see in one of their exmamples: material.angular.io/components/button-toggle/examples