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
exportationsCommonModule
, il n'est pas nécessaire d'importer à la fois. UtilisationBrowserModule
surAppModule
etCommonModule
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 comptemd-button
oumd-raised
sont des classes css.
Vous devez vous connecter pour publier un commentaire.
Il devrait être
OU
md-
composants dans le code html? Je crois que vous êtes censé être en mesure de le faire. Exemple: github.com/kara/leashed-in/blob/master/src/app/...md-button
Parfois, lorsque vous ajoutez de nouveaux composants pour la angular2 il n'est pas directement le registre de la balise dans de tels cas, vous devez faire 2 choses:
Accéder à l'application.composante.fichier ts