De la conception des matériaux composant “n'est pas un élément” dans Angular2

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)

Si, il peut sembler comme c'est le cas 1 dans le message, mais j'ai essayé les conseils donnés dans cette réponse pour ajouter MdButton à la imports propriété de mon NgModule (qui contenait déjà 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"]);
  • Avez-vous ajouter " MaterialModule.forRoot(),` de imports: [...] racine de votre @NgModule() (github.com/angular/material2/blob/...)?
  • Pourrais-tu nous montrer le code pertinent ?
  • Je l'ai fait.
  • ajout de code
  • Indice, BrowserModule exportations CommonModule, il n'est pas nécessaire d'importer à la fois. Utilisation BrowserModule sur AppModule et CommonModule sur d'autres modules.
  • Quelle est la solution si j'ai la même erreur avec md-icône ?
  • Une autre façon est d'utiliser l'attribut class de l'élément de bouton. <button class='md-button md-raised'> Foo </button>. En fin de compte md-button ou md-raised sont des classes css.