Подтвердить что ты не робот

Компонент дизайна материала "не является известным элементом" в Angular2

У меня есть гибридное приложение 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>"): [email protected]:12
    at TemplateParser.parse (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:8321:21)

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

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

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

Ответ 1

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

<button md-button>foo</button>   

ИЛИ

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

Ответ 2

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

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

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