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"]);
Author: Community, 2016-10-22

2 answers

Debe ser

<button md-button>foo</button>   

O

<button md-raised-button>foo</button>
 55
Author: micronyks,
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
 -1
Author: Vatsal Thakkar,
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