Angular2の素材設計コンポーネント「既知の要素ではありません」

Question

私はハイブリッドAngular1とAngular2のアプリケーションを持っています。私が経路指定しているAngular2コンポーネントの1つでは、Material Design Buttonを使用したいと考えています。私はこの<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のプロパティに（これは既にthe documentationがアドバイスされているMaterialModule.forRoot()が含まれています）を追加しますが、そうした場合、アプリケーション全体がエラーなしでコンソールに表示されます。ここで

は、あなたがそれを直接does't angular2に新しいコンポーネントを追加するときに、関連するコードの一部が

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> 

OR

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

Answer 2

あるべきですこのような場合には、2つのことを登録する必要があります：

ゴーファイル

• 1をapp.component.tsする）あなたのコンポーネントを登録し、パスを与える@Componentで「インポート{}コンポーネント」あなたは
• 2を追加したいボタン）に手動で挿入します