재질 디자인 구성 요소가 "알려진 요소가 아닙니다."

저는 하이브리드 Angular1 및 Angular2 응용 프로그램이 있습니다. 경로를 지정하는 Angular2 구성 요소 중 하나에서 Material Design 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>"): [email protected]:12 
    at TemplateParser.parse (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:8321:21)

그래서이 콘솔 메시지와 함께 충돌 시작이 <md-button>foo</md-button> 같은 템플릿에 버튼을 삽입 할 때이 메시지의 경우 1처럼

, 그것은 들릴 수도 있지만 내가 조언을 시도했다 this answer에서 (이미 을 포함하고 있음)의 imports 속성에 imports 속성을 추가하면됩니다.하지만 그렇게하면 전체 응용 프로그램이 콘솔에 오류없이 공백이됩니다. 여기

당신이 그것을 직접 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"]);

출처

2016-10-22 Klas Mellbourn

루트'@NgModule()'('https://github.com/angular/material2/blob/ ')의'imports : [...]'에'MaterialModule.forRoot() fcc5900e496adc5b11e47ad1e6d3e0c2ac2bad9e/GETTING_STARTED.md)? –

관련 코드를 보여 주시겠습니까? – micronyks

@ GünterZöchbauer 내가 그랬어. –

그것은 때때로

<button md-button>foo</button>

또는

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

출처

2016-10-22 18:23:44 micronyks

html에서'md-'컴포넌트를 사용할 수 없다는 말입니까? 나는 네가 그렇게 할 수 있다고 생각한다. 예 : https://github.com/kara/leashed-in/blob/master/src/app/app.component.html –

나는 이전 방식으로 재료에 버튼을 선언한다고 생각합니다. – micronyks

Doh, 그것은 그렇게 간단했습니다. 감사! –

-1

해야한다입니다 그런 경우에 태그를 등록하십시오 :

이동은) 파일

1 app.component.ts "수입 {구성}"에 수동으로 삽입 원하는 버튼 구성 요소를 등록 @Component에서
2)를 추가하고 경로를 제공하는

출처

2016-10-22 18:29:52

새 구성 요소가 "app.module.js"에 추가되었으며 각도 cli를 사용하여 자동으로 구성됩니다. "ng generate component aNewComponent" – pdem

Additionnaly 사용자 정의 구성 요소 문제가 아니 었습니다 설명은 사용자 지정 구성 요소 생성입니다.)하지만 내 경우를 검색하는 데 도움이, 나는 내 자신의 질문을 물어 봤어 야 :) – pdem

재질 디자인 구성 요소가 "알려진 요소가 아닙니다."

답변

관련 문제