Angular 2-Cannot import another component in component declaration

Question

I am new to Angular 2,currently experimenting with it , Here is the problem i got into

Like component Code

like.component.ts

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

@Component({
  selector: 'like',
  template: `
  <span (click) ="onClick()" class="glyphicon glyphicon-heart" [class.liked]="isLike" ></span>
  <span>{{likeCount+incrmentCOunt}}</span>

  `,
  styles:[`
        .glyphicon-heart{
          color:#ccc;
        }

        .liked{
          color:deeppink;
        }
  `]

})
export class LikeComponent  { 
  @Input("like") isLike = false;
  @Input() likeCount:number;
  incrmentCOunt=0;
  onClick(){
   if(this.isLike){
     this.isLike=false;
this.incrmentCOunt=0;
   }else{
     this.isLike=true;
     this.incrmentCOunt=1;
        }
  }

}

While implementing nested components i am importing all the components to the ngModule decorator and adding it as a declaration like this

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TweetComponent } from './tweet/tweet.component';
import { AppComponent }  from './app.component';
import { LikeComponent } from './like/like.component';
@NgModule({
    imports:      [ BrowserModule ],
    declarations: [ AppComponent ,TweetComponent,LikeComponent],
    bootstrap:    [ AppComponent ]
})
export class AppModule { }

This is working perfectly fine ,Now i have decided to remove the LikeComponent from ngModule and tried to import it in the TweetComponent,

tweet.component.ts

import { Component,Input } from '@angular/core';
import { LikeComponent } from './../like/like.component';

@Component({
  selector: 'tweet',
  template: `
  <div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" [src]="tweet.img" alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">{{tweet.name}} <span>{{tweet.handle}}</span></h4>
    <div >{{tweet.content}}</div>
    <div>
    <like [likeCount]="tweet.likeCount"></like>
    </div>
  </div>
</div>
  `   
  ,
  declarations:[LikeComponent]
})
export class TweetComponent  { 
    @Input() tweet={
            name:"Mukul",
            handle:"@mukul",
            content:"some content",
            likeCount:20
        }

}

Here iam not able to use it , i have tried to inject it in decleration and as directives both are not working , Type related error is shown in sublime

Hoping to get some clarification here ,Thanks

update your post with LikeComponent code. Firstly, what is that you are trying to achieve? — Aravind
– Aravind, Commented Feb 26, 2017 at 13:10
sure @Aravind its now updated, i am trying to import likeComponent in tweet component, LikeComponent was initially imported inside app module , but i want to see if it can be imported inside tweet component,or not — Mukul Jayaprakash
– Mukul Jayaprakash, Commented Feb 26, 2017 at 13:51
remove declarations:[LikeComponent] . you need to decleare thr component at your module — Yoav Schniederman
– Yoav Schniederman, Commented Feb 26, 2017 at 13:53
@YoavSchniederman declaring LikeComponent at module is working fine,just wanted to see if a component can be imported and declared in another component defenition. So the conclusion is that all components must be imported and declared in a ngModule? — Mukul Jayaprakash
– Mukul Jayaprakash, Commented Feb 26, 2017 at 14:05

Günter Zöchbauer · Accepted Answer · 2017-02-26 14:05:53Z

3

declarations:[LikeComponent]

in @Component() is gone since 2.0.0-RC.6

answered Feb 26, 2017 at 14:05

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 2-Cannot import another component in component declaration

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related