Le composant de conception de matériau "n'est pas un élément connu" dans Angular2

Question

J'ai un hybride Angular1 et Angular2 application. Dans l'un des Angular2 composants que je voie pour, je veux utiliser un Matériel de Conception de Bouton.

Lorsque j'insère un bouton dans le modèle comme celui-ci <md-button>foo</md-button> le démarrage de l'application plante avec ce message de la console

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)

Ainsi, il peut sembler comme c'est le cas 1 dans le message, mais j'ai essayé les conseils donnés dans cette réponse d'ajouter MdButton de la imports de la propriété de mon NgModule (ce qui est déjà contenue MaterialModule.forRoot() comme conseillé par la documentation) , mais si je le fais, l'ensemble de l'application se vide sans erreurs dans la console.

Voici le 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

CA devrait etre

 <button md-button>foo</button>   
 

OU

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

Answer 2

Parfois, lorsque vous ajoutez un nouveau composant à angular2, il n'enregistre pas directement le tag. Dans ce cas, vous devez faire 2 choses:

Aller au fichier app.component.ts

• 1) Insérez manuellement dans "importer {composant}" le bouton que vous souhaitez ajouter
• 2) Dans le @Component, enregistrez votre composant et donnez le chemin