El componente de diseño de material "no es un elemento conocido" en Angular2
Tengo una aplicación híbrida Angular1 y Angular2. En uno de los componentes Angular2 a los que me dirijo, quiero usar un botón de diseño de material.
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)
Entonces, puede sonar como si fuera el caso 1 en el mensaje, pero he intentado los consejos dados enesta respuesta para agregarMdButton
alimports
propiedad de miNgModule
(que ya conteníaMaterialModule.forRoot()
según lo aconsejado porla 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"]);