Компонент для проектирования материалов «не является известным элементом» в Angular2

Question

У меня есть гибридное приложение Angular1 и Angular2. В одном из компонентов Angular2, к которому я направляюсь, я хочу использовать кнопку Material Design.

Когда я вставить кнопку в шаблон, как этот <md-button>foo</md-button> приложение начинает разбивая с этой консолью сообщением

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) 

Таким образом, это может звучать как это случай 1 в сообщении, но я попробовал совет приведенный в this answer, чтобы добавить в imports свойство моего NgModule (которое уже содержало MaterialModule.forRoot() по рекомендации the documentation), но если да, то все приложение пустует без ошибок в консоли.

Вот некоторые из соответствующего кода

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"]); 

Answer 1

Это должно быть

<button md-button>foo</button> 

ИЛИ

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

Answer 2

Иногда, когда вы добавляете новый компонент в angular2 он does't напрямую зарегистрируйте тег в таких случаях, вам нужно сделать 2 вещи:

Перейти к app.component.ts файл

• 1) Вставьте вручную в «импорта {компонента}» кнопку, которую вы хотите добавить
• 2) В @Component зарегистрировать компонент и дать путь