Componente de diseño de materiales "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 dirijo, quiero usar un Botón de Diseño de Materiales.
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)
Por lo tanto, puede sonar como si fuera el caso 1 en el mensaje, pero he probado el consejo dado en esta respuesta {[13] } para agregar MdButton
a la propiedad imports
de mi NgModule
(que ya contenía MaterialModule.forRoot()
como por la documentación), pero si lo hago, toda la aplicación queda en blanco sin errores en la consola.
He aquí algunos de los códigos pertinentes
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"]);
2 answers
Debe ser
<button md-button>foo</button>
O
<button md-raised-button>foo</button>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-10-22 18:33:35
A veces cuando agregas un nuevo componente al angular2 no registra directamente la etiqueta en estos casos tienes que hacer 2 cosas:
Ir a la aplicación.componente.ts file
- 1) Inserte manualmente en "import {component}" el botón que desea agregar
- 2) En el @Component registrar su componente y dar la ruta
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-16 15:51:35