Material-Design-Komponente "ist kein bekanntes Element" in Angular2
Ich habe eine Hybridanwendung für Angular1 und Angular2. In einer der Angular2-Komponenten, zu denen ich route, möchte ich eine Materialdesign-Schaltfläche verwenden.
Wenn ich eine Schaltfläche in die Vorlage einfüge<md-button>foo</md-button>
Die Anwendung stürzt mit dieser Konsolenmeldung ab.
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)
So klingt es vielleicht wie Fall 1 in der Nachricht, aber ich habe den Rat ausprobiert, der in @ gegeben wurddiese Antwort hinzufügenMdButton
zumimports
Eigentum von meinemNgModule
(welches bereits @ enthieMaterialModule.forRoot()
wie von @ empfohldie Dokumentatio), aber wenn ich das tue, wird die gesamte Anwendung ohne Fehler in der Konsole gelöscht.
Hier ist ein Teil des relevanten Codes
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"]);