Angular 2 debuggers says a element is not known; which is in a .component.ts file

Question

I already referred to this website which seems to be closest: Angular2 RC6: '<component> is not a known element' but it didn't help. I tried to modify @NgModule.imports.

This is what the debugger in Chrome says:

Unhandled Promise rejection: Template parse errors:
'item' is not a known element:
1. If 'item' is an Angular component, then verify that it is part of this module.
2. If 'item' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
    [ERROR ->]<item status="false" *ngIf="isShow==false"></item>
    <item status="true" *ngIf="isShow==true"><"): ViewchildComponent@1:8

These item and item-component are declared in viewchild.component.ts.

This is app.module.ts; after referring the website above, I imported ViewchildComponent in @NgModule.imports.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { ViewchildComponent } from './viewchild/viewchild.component';

@NgModule({
declarations: [
    AppComponent
    // ViewchildComponent //<<-- I made this a comment
],
imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    ViewchildComponent //<<-- I added this
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

This is viewchild.component.ts.

import {AfterViewInit, Component, Directive, Input, ViewChild} from '@angular/core';

@Directive({ selector: 'item'})
export class Item{
    @Input() status: boolean;}

@Component({
    selector: 'item-component',
    template: '<button>알림창</button>'})
export class ItemComponent{
    display(){
        alert('ItemComponent입니다');}}

@Component({
    selector: 'app-view-child',
    template: `
        <item status="false" *ngIf="isShow==false"></item>
        <item status="true" *ngIf="isShow==true"></item>
        <button (click)="toggle()">선택</button><br>
        isShow : {{isShow}}<br>
        status : {{status}}<br>
        <item-component (click)="display()"></item-component>`})
export class ViewchildComponent {
    @ViewChild(Item)
    set item(v: Item){
        setTimeout(() => {this.status = v.status;}, 0);}

    @ViewChild(ItemComponent) itemComponent: ItemComponent;
    isShow: boolean = true;
    status: boolean;

    toggle() {
        this.isShow = !this.isShow;}

    display(){
        this.itemComponent.display();}}

index.html has <app-root></app-root> and this component only has <app-view-child></app-view-child>. I think the template of <app-view-child> is correctly loaded but the directive item and the component item-component are not able to be found.

Is here anything I'm missing? Please comment if some more codes are needed.

Answer 1

You have to declare all the components and directives in you root module if you don't have any other modules. That means you have to declare not only ViewchildComponent but also Item & ItemComponent. Like this:

... // Others Imports
import { ViewchildComponent, Item, ItemComponent } from './viewchild/viewchild.component';

@NgModule({
  declarations: [
    ... // Other Declarations
    ViewchildComponent, //<<-- Uncomment this
    Item,
    ItemComponent
 ],
 imports: [
   ... // Other Module Imports
   // ViewchildComponent // Don't import components or directive here. Only imports modules here.
 ],
 ...
})
export class AppModule { }