for - El componente de diseño de materiales "no es un elemento conocido" en Angular2

angular material tutorial

Question

Tengo una aplicación híbrida Angular1 y Angular2. En uno de los componentes de Angular2 a los que me dirijo, quiero usar un botón de diseño de materiales.

Cuando inserto un botón en la plantilla como este <md-button>foo</md-button> la aplicación comienza a fallar con este mensaje de consola

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)

Por lo tanto, podría sonar como si fuera el caso 1 en el mensaje, pero he intentado con el consejo dado en esta respuesta para agregar MdButton a la propiedad de imports de mi NgModule (que ya contenía MaterialModule.forRoot() como lo indica la documentación ), pero si lo hago, toda la aplicación se queda en blanco sin errores en la consola.

Aquí hay algunos de los códigos relevantes

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

A veces, cuando agrega un nuevo componente al angular2, no registra directamente la etiqueta en tales casos, tiene que hacer dos cosas:

Ir al archivo app.component.ts

• 1) Inserte manualmente en "importar {componente}" el botón que desea agregar
• 2) En @Component registra tu componente y dale la ruta

Answer 2

Debería ser

<button md-button>foo</button>   

O

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