Angular2 में सामग्री डिजाइन घटक "ज्ञात तत्व नहीं है"




material-design angular-material2 (2)

कभी-कभी जब आप कोणीय 2 में नया घटक जोड़ते हैं तो यह इस तरह के मामलों में टैग को सीधे पंजीकृत नहीं करता है, आपको 2 चीजें करना पड़ता है:

App.component.ts फ़ाइल पर जाएं

  • 1) जिस बटन को आप जोड़ना चाहते हैं उसे "आयात {घटक}" में मैन्युअल रूप से सम्मिलित करें
  • 2) @ कॉम्पोनेंट में अपना घटक पंजीकृत करें और पथ दें

मेरे पास एक संकर कोणीय 1 और कोणीय 2 अनुप्रयोग है। एंजुलर 2 घटकों में से एक में जो मैं मार्ग करता हूं, मैं एक सामग्री डिजाइन बटन का उपयोग करना चाहता हूं।

जब मैं इस <md-button>foo</md-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>"): [email protected]:12
    at TemplateParser.parse (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:8321:21)

तो, ऐसा लगता है कि यह संदेश में मामला 1 है, लेकिन मैंने इस जवाब में दिए गए सलाह को MdButton को मेरे NgModule (जो पहले से ही MaterialModule.forRoot() को प्रलेखन द्वारा सलाह दी गई है, imports संपत्ति में जोड़ने की सलाह दी है) लेकिन अगर मैं करता हूं, तो संपूर्ण एप्लिकेशन कंसोल में त्रुटियों के बिना खाली हो जाता है।

यहां कुछ प्रासंगिक कोड हैं

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

यह होना चाहिए

<button md-button>foo</button>   

या

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




angular-material2