Angular2 RC6: '<घटक> एक ज्ञात तत्व नहीं है'

Question

जब मैं अपने कोणीय 2 RC6 ऐप को चलाने की कोशिश कर रहा हूं, तो मुझे ब्राउज़र कंसोल में निम्न त्रुटि हो रही है:

> Error: Template parse errors: 'header-area' is not a known element:
> 1. If 'header-area' is an Angular component, then verify that it is part of this module.
> 2. If 'header-area' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component
> to suppress this message.("

    <div class="page-container">
        [ERROR->]<header-area></header-area>
        <div class="container-fluid">

> "): PlannerComponent@1:2

मुझे नहीं मिला कि घटक क्यों नहीं मिला। मेरा प्लानर मोड इस तरह दिखता है:

@NgModule({
  declarations: [
    PlannerComponent,
    HeaderAreaComponent,
    NavbarAreaComponent,
    EreignisbarAreaComponent,
    GraphAreaComponent,
    nvD3
    ],
  imports: [
    RouterModule,
    CommonModule,
    ModalModule
    ],
  bootstrap: [PlannerComponent],
})
export class PlannerModule {}

और जहां तक ​​मैंने एनजी 2 में मॉड्यूल की अवधारणा को समझा, मॉड्यूल के हिस्सों को 'घोषणाओं' में घोषित किया गया है। पूर्णता के लिए, यहां प्लानर कॉमपोनेंट है:

@Component({
  selector: 'planner',
  providers: [CalculationService],
  templateUrl: './planner.component.html',
  styleUrls: ['./planner.component.styl']
})
export default class PlannerComponent {
}

और HeaderAreaComponent:

@Component({
  selector: 'header-area',
  templateUrl: './header-area.component.html',
  styleUrls: ['./header-area.component.styl']
})
export default class HeaderAreaComponent {
}

<header-area>-Tag planner.component.html में स्थित है:

<div class="page-container">
  <header-area></header-area>
  <div class="container-fluid">

    <div class="row">...

क्या मुझे कुछ गड़बड़ लगी?

अपडेट : पूरा कोड

planner.module.ts:

import HeaderAreaComponent from '../header-area/header-area.component';
import NavbarAreaComponent from '../navbar-area/navbar-area.component';
import GraphAreaComponent from '../graph-area/graph-area.component';
import EreignisbarAreaComponent from '../ereignisbar-area/ereignisbar-area.component';
import PlannerComponent from './planner.component';
import {NgModule} from '@angular/core';
import {nvD3} from 'ng2-nvd3';
import {RouterModule} from '@angular/router';
import {CommonModule} from '@angular/common';
import {ModalModule} from 'ng2-bootstrap/ng2-bootstrap';

@NgModule({
  declarations: [
    PlannerComponent,
    HeaderAreaComponent,
    NavbarAreaComponent,
    EreignisbarAreaComponent,
    GraphAreaComponent,
    nvD3
  ],
  imports: [
    RouterModule,
    CommonModule,
    ModalModule
  ],
  bootstrap: [PlannerComponent],
})
export class PlannerModule {
  // TODO: get rid of the "unused class" warning
}

planner.component.ts

import {Component} from '@angular/core';
import CalculationService from '../_shared/services/calculation.service/calculation.service';
import HeaderAreaComponent from '../header-area/header-area.component';

@Component({
  selector: 'planner',
  providers: [CalculationService],
  templateUrl: './planner.component.html',
  styleUrls: ['./planner.component.styl']
})
export default class PlannerComponent {
}

planner.component.html

<div class="page-container">
  <header-area></header-area>
  <div class="container-fluid">

    <div class="row">
      <div class="col-xs-2 col-sm-1 sidebar">
        <navbar-area></navbar-area>
      </div>
      <div class="col-xs-10 col-sm-11">
        <graph-area></graph-area>
      </div>
    </div><!--/.row-->

    <div class="row">
      <div class="col-xs-10 col-sm-11 offset-sm-1">
        <ereignisbar-area></ereignisbar-area>
      </div>
    </div><!--/.row-->

  </div><!--/.container-->
</div><!--/.page-container-->

Comments

आप HeaderAreaComponentबिना {}और दूसरों के साथ आयात क्यों करते हैं {}। क्या आप उन्हें उसी तरह आयात करने की कोशिश कर सकते हैं? (शायद हटा default?)

— गुंटर ज़ोचबॉयर 16

मैंने डिफ़ॉल्ट को हटा दिया और इसे बिना आयात किया {}, लेकिन मुझे वही परिणाम मिला।

— frot.io

Answer 1

मुझे यह त्रुटि तब मिली जब मैंने मॉड्यूल ए को मॉड्यूल बी में आयात किया, और फिर मॉड्यूल बी में मॉड्यूल ए से एक घटक का उपयोग करने की कोशिश की।

समाधान उस घटक को exportsसरणी में घोषित करना है ।

@NgModule({
  declarations: [
    MyComponent
  ],
  exports: [
    MyComponent
  ]
})
export class ModuleA {}

@NgModule({
  imports: [
    ModuleA
  ]
})
export class ModuleB {}

Comments

और स्वाभाविक रूप से, घटकों पर एंगुलर के दस्तावेज़ीकरण में इसका उल्लेख नहीं है।

— जॉन

मैं एक दिन के लिए इस पर अपना सिर खुजलाता हूँ! आपको बहुत - बहुत धन्यवाद!

— ईजीसी

Answer 2

मैंने इसे साकेत के उत्तर और टिप्पणियों की मदद से ठीक किया ।

क्या आप जानते हैं कि नहीं कर सकता है और करने में त्रुटि संदेश स्पष्ट नहीं किया गया है: मैं आयातित PlannerComponent एक के रूप में @ NgModule.declaration मेरी अनुप्रयोग मॉड्यूल (= RootModule) में।

PlannerModule को @ NgModule.imports के रूप में आयात करके त्रुटि को ठीक किया गया था ।

इससे पहले:

@NgModule({
  declarations: [
    AppComponent,
    PlannerComponent,
    ProfilAreaComponent,
    HeaderAreaComponent,
    NavbarAreaComponent,
    GraphAreaComponent,
    EreignisbarAreaComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routeConfig),
    PlannerModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {

उपरांत:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routeConfig),
    PlannerModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

आपकी सहायता के लिए धन्यवाद :)

Comments

मैंने अंतर स्पष्ट करने के लिए स्वरूपण को बदलने के लिए आपके उत्तर को संपादित किया। अब जब मैंने यह कर लिया है, मैं देखता हूं कि ऐसा लगता है कि अंतर यह है कि आपने बस से कई आइटम हटा दिए हैं declarations। क्या यह सही हो सकता है?

— जेसन स्वेट

जीप, यह सही है। AppModule और PlannerModule दो अलग चीजें हैं, और मैंने दोनों में कुछ घटकों की घोषणा की। यह केवल एक मॉड्यूल में एक घटक की घोषणा करके और दूसरे के भीतर इस मॉड्यूल को आयात करके काम करता है।

— frot.io

अपना समाधान पोस्ट करने के लिए धन्यवाद, लेकिन "इससे पहले" अनुभाग में आप आयातित प्लानर के रूप में भी दिखाते हैं

— जुआन

Answer 3

यदि आपने वेबक्लिप का स्वचालित रूप से जेनरेट की गई घटक परिभाषा का उपयोग किया है तो आप पा सकते हैं कि चयनकर्ता का नाम 'app-' के लिए प्रीपेड है। जाहिरा तौर पर यह एक मुख्य सम्मेलन घटक के उप-घटकों की घोषणा करते समय एक नया सम्मेलन है। जांचें कि आपके चयनकर्ता को आपके घटक में कैसे परिभाषित किया गया है यदि आपने इसे 'नया' - 'घटक' का उपयोग किया है, तो इसे कोणीय आईडीई में बनाएं। इसलिए डालने के बजाय

<header-area></header-area>

आप को आवश्यकता हो सकती

<app-header-area></app-header-area>

Comments

ngक्ली द्वारा उत्पन्न घटकों के साथ भी यही सच है।

— खोजकर्ता

यदि मैं --selectorविकल्प के साथ एक घटक उत्पन्न करता हूं , तो मुझे app-घटक टैग के साथ उपसर्ग करने की आवश्यकता नहीं है । Ex:ng generate component menu-list --selector 'menu-list'

— खोजकर्ता

विश्वास नहीं कर सकता कि यह मेरा मुद्दा था ..: / धन्यवाद! Upvoted !!

— सैक्सोफोनिस्ट

Answer 4

मैं <flash-messages></flash-messages>कोणीय 5 के लिए एक ही समस्या ला रहा हूं ।

आपको बस app.module.ts फ़ाइल में नीचे की पंक्तियों को जोड़ने की आवश्यकता है

import { ---, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FlashMessageModule } from "angular-flash-message";


@NgModule({
  ---------------
  imports: [
    FlashMessageModule,
    ------------------         
  ], 
  -----------------
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
  ------------
})

NB: मैं संदेश फ्लैश-संदेशों के लिए इसका उपयोग कर रहा हूं

Comments

मेरी समस्या का केवल समाधान मैं 2 घंटे से सामना कर रहा था

— वेरोनिका

Answer 5

अपने योजनाकार घटक में, आपको इस तरह से HeaderAreaComponent आयात नहीं करना चाहिए-

import { HeaderAreaComponent } from '../header-area.component'; 
//change path according your project

यह भी सुनिश्चित करें - सभी घटकों और पाइपों को एक NgModule के माध्यम से घोषित किया जाना चाहिए ।

देखें कि क्या यह मदद करता है।

Comments

दुर्भाग्य से नहीं - त्रुटि समान रहती है और आयात को लिंट द्वारा अप्रयुक्त के रूप में चिह्नित किया जाता है।

— frot.io

क्या आप कृपया अपने NgModule और योजनाकार घटक का पूरा कोड पोस्ट कर सकते हैं?

— संचित

ऊपर दिए गए Gunter सुझाव के अलावा, इस तरह से अपने योजनाकार डाटासेट में BrowserModule को आयात करने का भी प्रयास करें- import { BrowserModule } from '@angular/platform-browser';

— Sanket

मैंने इसे योजनाकार घटक में और मॉड्यूल में आयात करने के साथ आयात करने की घोषणा की - फिर भी कोई सफलता नहीं मिली।

— 17

अब इस तरह NgModule के प्रदाताओं में कैल्कुलेशन सेवा को जोड़ने का प्रयास करें-providers: [CalculationService],

— Sanket

Answer 6

मैं कोणीय 7 पर इस मुद्दे का सामना कर रहा था और मॉड्यूल बनाने के बाद समस्या थी, मैंने प्रदर्शन नहीं किया ng build। इसलिए मैंने प्रदर्शन किया -

• ng build
• ng serve

और यह काम किया।

Comments

बस एनजी सेवा चलाने के लिए फिर से यह मेरे लिए किया था, काफी लंगड़ा हालांकि

— एल्गर मेन्सोनाइड्स

Answer 7

इकाई परीक्षण में आने वाली त्रुटि, जब घटक <router-outlet>मुख्य ऐप पेज में बाहर है । तो नीचे की तरह परीक्षण फ़ाइल में घटक को परिभाषित करना चाहिए।

<app-header></app-header>
<router-outlet></router-outlet>

और फिर नीचे के रूप में spec.ts फ़ाइल में जोड़ना होगा।

import { HeaderComponent } from './header/header.component';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        App`enter code here`Component,
        HeaderComponent <------------------------
      ],
    }).compileComponents();
  }));
});

Answer 8

एक ही त्रुटि संदेश होने का एक अन्य संभावित कारण टैग नाम और चयनकर्ता नाम के बीच एक बेमेल है। इस मामले के लिए:

<header-area></header-area>टैग नाम 'header-area'घटक घोषणा से बिल्कुल मेल खाना चाहिए :

@Component({
  selector: 'header-area',

Answer 9

मैं एक ही मुद्दे पर कोणीय RC.6 के साथ था। किसी कारण से यह घटक को अन्य घटक को पास करने की अनुमति नहीं देता है, मूल घटक के लिए घटक सज्जाकार के रूप में निर्देशों का उपयोग कर

लेकिन अगर आप ऐप मॉड्यूल के माध्यम से बच्चे के घटक को आयात करते हैं और इसे घोषणा सरणी में जोड़ते हैं तो त्रुटि दूर हो जाती है। इस बारे में कोई स्पष्टीकरण नहीं है कि यह कोणीय rc.6 के साथ एक मुद्दा क्यों है

Answer 10

जब मैं इस समस्या थी, क्योंकि मैं डेकोरेटर में 'templateUrl' के बजाय सिर्फ 'टेम्पलेट' का इस्तेमाल किया गया था, के बाद से मैं का उपयोग webpack और जरूरत के लिए उपयोग की आवश्यकता होती है उस में। बस डेकोरेटर के नाम के साथ सावधान रहें, मेरे मामले में मैंने एक स्निपेट का उपयोग करके बॉयलरप्लेट कोड उत्पन्न किया, डेकोरेटर इस तरह बनाया गया था:

@Component({
  selector: '',
  templateUrl: 'PATH_TO_TEMPLATE'
})

लेकिन वेबपैक के लिए डेकोरेटर सिर्फ ' टेम्प्लेट ' नहीं ' टेम्प्लेट ' होना चाहिए , जैसे:

@Component({
  selector: '',
  template: require('PATH_TO_TEMPLATE')
})

इसे बदलने से मेरे लिए समस्या हल हो गई।

दो तरीकों के बारे में अधिक जानना चाहते हैं? इस मध्यम पोस्ट को बनाम के बारे में पढ़ेंtemplatetemplateUrl

Answer 11

मुझे यह त्रुटि तब मिली जब मेरे पास एक फ़ाइलनाम और वर्ग निर्यातित बेमेल था:

फ़ाइल नाम: list.component.ts

वर्ग निर्यात किया गया: ListStudentsComponent

से बदल रहा है ListStudentsComponent को ListComponent मेरी समस्या का समाधान हो।

Answer 12

मैं इस सटीक समस्या पर भागा। विफल: टेम्प्लेट पार्स त्रुटियां: 'ऐप-लॉगिन' एक ज्ञात तत्व नहीं है ... के साथng test । मैंने उपरोक्त सभी उत्तरों की कोशिश की: कुछ भी काम नहीं किया।

एनजी टेस्ट समाधान:

कोणीय 2 कर्म परीक्षण 'घटक-नाम' एक ज्ञात तत्व नहीं है

<= मैं में हमलावर घटकों के लिए घोषणाओं जोड़ा beforEach(.. declarations[])को app.component.spec.ts ।

EXAMPLE app.component.spec.ts

...
import { LoginComponent } from './login/login.component';
...
describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        ...
      ],
      declarations: [
        AppComponent,
        LoginComponent
      ],
    }).compileComponents();
  ...

Answer 13

मुझे वही समस्या थी और मैंने उस मॉड्यूल में निर्यात सरणी में कंपोनेंट (MyComponentToUse) को जोड़कर तय किया जहां मेरा कंपोनेंट घोषित किया गया था (ModuleLower)। तब मैं ModuleHigher में ModuleLower का आयात करता हूं, इसलिए मैं अब ModuleLower और ModuleHigher में अपने घटक (MyComponentToUse) का पुन: उपयोग कर सकता हूं

            @NgModule({
              declarations: [
                MyComponentToUse
              ],
              exports: [
                MyComponentToUse
              ]
            })
            export class ModuleLower {}


            @NgModule({
              imports: [
                ModuleLower
              ]
            })
            export class ModuleHigher {} 

Comments

वास्तव में, बस घटक निर्यात करने की आवश्यकता है।

— रोहित पराते

Answer 14

मेरे पास एंगुलर 7 के साथ एक ही मुद्दा था जब मैं परीक्षण घटक को घोषित करके परीक्षण मॉड्यूल को परिष्कृत करने जा रहा हूं। बस schemas: [ CUSTOM_ELEMENTS_SCHEMA ]निम्नानुसार जोड़ा गया और त्रुटि हल हो गई।

TestBed.configureTestingModule({
  imports: [ReactiveFormsModule, FormsModule],
  declarations: [AddNewRestaurantComponent],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
});

Answer 15

भविष्य की समस्याओं के लिए। यदि आपको लगता है कि आपने सभी अच्छे उत्तरों का अनुसरण किया है और फिर भी, समस्या है।

सर्वर को चालू और बंद करने का प्रयास करें।

मेरे पास एक ही समस्या थी, सभी चरणों का पालन किया, इसे हल नहीं किया जा सका। बंद करें, चालू करें और इसे ठीक किया गया।

Comments

पहले मुझे लगा कि मुझे केवल npm start(पानी के नीचे ng serve) पुनरारंभ करना होगा । यह कभी-कभी मुद्दों को स्पष्ट करने में मदद करता है। अब मुझे पूरी तरह से Visual Studio Code को पुनरारंभ करना था।

— माइक डी क्लार्क

Answer 16

एक नौसिखिया गलती मेरे मामले में एक ही त्रुटि संदेश उत्पन्न कर रही थी।

यह app-rootटैग index.html में मौजूद नहीं था

Answer 17

OnInitng new ...नए घटक उत्पन्न करने के लिए कोणीय CLI पर प्रमुख वाक्यांश का उपयोग करते हुए स्वचालित रूप से मेरी कक्षा पर लागू किया गया था । इसलिए जब मैंने कार्यान्वयन को हटा दिया और उत्पन्न हुई खाली पद्धति को हटा दिया, तो समस्या हल हो गई।

Answer 18

मेरे लिए templateUrl के लिए रास्ता सही नहीं था

मैं उपयोग कर रहा था

खरीदारी की सूची-edit.component.html

जबकि होना चाहिए था

./shopping-list-edit.component.html

मूर्खतापूर्ण गलती लेकिन शुरू होने पर होती है। आशा है कि किसी को संकट में मदद करता है।

Answer 19

थ्रेड के लिए देर से जवाब, लेकिन मुझे यकीन है कि और लोग हैं जो इस जानकारी का उपयोग दूसरे परिप्रेक्ष्य में समझाया गया है।

आयनिक में, कस्टम कोणीय घटकों को एक अलग मॉड्यूल के तहत आयोजित किया जाता है जिसे कहा जाता है ComponentsModule। जब घटक ionic generate componentके साथ पहला घटक उत्पन्न होता है , आयनिक घटक उत्पन्न करता है ComponentsModule। किसी भी बाद के घटकों को एक ही मॉड्यूल में जोड़ा जाता है, ठीक है।

यहाँ एक नमूना है ComponentsModule

import { NgModule } from '@angular/core';
import { CustomAngularComponent } from './custom/custom-angular-component';
import { IonicModule } from 'ionic-angular';
@NgModule({
    declarations: [CustomAngularComponent],
    imports: [IonicModule],
    exports: [CustomAngularComponent],
    entryComponents:[

      ]
})
export class ComponentsModule {}

ComponentsModuleकिसी अन्य कोणीय मॉड्यूल की तरह ऐप में उपयोग करने के लिए , ComponentsModulesआयात करने की आवश्यकता है AppModule। ईओण उत्पन्न घटक (v 4.12) इस कदम को नहीं जोड़ता है, इसलिए इसे मैन्युअल रूप से जोड़ना होगा।

AppModule का अंश:

@NgModule({
  declarations: [
    //declaration
  ],
  imports: [
    //other modules 
    ComponentsModule,
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    //ionic pages
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    //other providers
  ]
})
export class AppModule {}

Answer 20

ठीक है, मुझे कोड का विवरण दें, अन्य मॉड्यूल के घटक का उपयोग कैसे करें।

उदाहरण के लिए, मेरे पास M2 मॉड्यूल है, M2 मॉड्यूल में comp23 कंपोनेंट और comp2 कंपोनेंट हैं, अब मैं app.module में comp23 और comp2 का उपयोग करना चाहता हूं, यहां बताया गया है:

यह app.module.ts है, मेरी टिप्पणी देखें,

 // import this module's ALL component, but not other module's component, only this module
  import { AppComponent } from './app.component';
  import { Comp1Component } from './comp1/comp1.component';

  // import all other module,
 import { SwModule } from './sw/sw.module';
 import { Sw1Module } from './sw1/sw1.module';
 import { M2Module } from './m2/m2.module';

   import { CustomerDashboardModule } from './customer-dashboard/customer-dashboard.module';


 @NgModule({

    // declare only this module's all component, not other module component.  

declarations: [
AppComponent,
Comp1Component,


 ],

 // imports all other module only.
imports: [
BrowserModule,
SwModule,
Sw1Module,
M2Module,
CustomerDashboardModule // add the feature module here
],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

यह एम 2 मॉड्यूल है:

   import { NgModule } from '@angular/core';
   import { CommonModule } from '@angular/common';

   // must import this module's all component file
   import { Comp2Component } from './comp2/comp2.component';
   import { Comp23Component } from './comp23/comp23.component';

   @NgModule({

   // import all other module here.
     imports: [
       CommonModule
     ],

    // declare only this module's child component. 
     declarations: [Comp2Component, Comp23Component],

   // for other module to use these component, must exports
     exports: [Comp2Component, Comp23Component]
   })
   export class M2Module { }

कोड में मेरी प्रशंसा बताती है कि आपको यहां क्या करने की आवश्यकता है।

अब app.component.html में, आप उपयोग कर सकते हैं

  <app-comp23></app-comp23>

कोणीय डॉक्टर नमूना आयात मॉड्यूल का पालन करें