web-dev-qa-db-fra.com

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

J'ai une application hybride Angular1 et Angular2. Dans l'un des composants angulaires2 vers lesquels je conduis, je souhaite utiliser un bouton de conception de matériau.

Quand j'insère un bouton dans le modèle comme ceci <md-button>foo</md-button> l'application commence à se bloquer 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)

Cela peut donc sembler être le cas 1 du message, mais j’ai suivi le conseil donné dans cette réponse d’ajouter MdButton à la propriété imports de mon NgModule (qui contenait déjà MaterialModule.forRoot() comme conseillé par la documentation ), mais si je le fais, toute l'application disparaît sans erreur dans la console.

Voici quelques-uns des codes pertinents

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"]);
angularmaterial-designangular-material2
40
Klas Mellbourn

CA devrait etre

<button md-button>foo</button>

OR

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