app having error when starting

chalie001 asked

on 2020-02-01

hi am having this error in my angular application

Uncaught Error: Template parse errors:
Can't bind to 'posts' since it isn't a known property of 'app-post-list'.
1. If 'app-post-list' is an Angular component and it has 'posts' input, then verify that it is part of this module.
2. If 'app-post-list' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("n>
<app-post-create (postCreated)="onPostAdded($event)"></app-post-create>
<app-post-list [ERROR ->][posts]="storedPosts"></app-post-list>
</main>

"): ng:///AppModule/AppComponent.html@4:19
at syntaxError (compiler.js:2175)
at TemplateParser.parse (compiler.js:11292)
at JitCompiler._parseTemplate (compiler.js:25837)
at JitCompiler._compileTemplate (compiler.js:25825)
at compiler.js:25769
at Set.forEach (<anonymous>)
at JitCompiler._compileComponents (compiler.js:25769)
at compiler.js:25682
at Object.then (compiler.js:2166)
at JitCompiler._compileModuleAndComponents (compiler.js:25681)
syntaxError @ compiler.js:2175
parse @ compiler.js:11292
_parseTemplate @ compiler.js:25837
_compileTemplate @ compiler.js:25825
(anonymous) @ compiler.js:25769
_compileComponents @ compiler.js:25769
(anonymous) @ compiler.js:25682
then @ compiler.js:2166
_compileModuleAndComponents @ compiler.js:25681
compileModuleAsync @ compiler.js:25643
compileModuleAsync @ platform-browser-dynamic.js:216
compileNgModuleFactory__PRE_R3__ @ core.js:33313
bootstrapModule @ core.js:33618
./src/main.ts @ main.ts:12
__webpack_require__ @ bootstrap:79
0 @ main.ts:13
__webpack_require__ @ bootstrap:79
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
2localhost/:1 Unchecked runtime.lastError: The message port closed before a response was received.
client:52 [WDS] Live Reloading enabled.

import { Component, OnInit, OnDestroy } from "@angular/core";
import { Subscription } from 'rxjs';

import { Post } from "../../post.model";
import { PostsService } from "../../posts.service";

@Component({
selector: "app-post-list",
templateUrl: "./post-list.component.html",
styleUrls: ["./post-list.component.css"]
})
export class PostListComponent implements OnInit, OnDestroy {
// posts = [
// { title: "First Post", content: "This is the first post's content" },
// { title: "Second Post", content: "This is the second post's content" },
// { title: "Third Post", content: "This is the third post's content" }
// ];
posts: Post[] = [];
private postsSub: Subscription;

constructor(public postsService: PostsService) {}

ngOnInit() {
this.posts = this.postsService.getPosts();
this.postsSub = this.postsService.getPostUpdateListener()
.subscribe((posts: Post[]) => {
this.posts = posts;
});
}

ngOnDestroy() {
this.postsSub.unsubscribe();
}
}
===
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import {
MatInputModule,
MatCardModule,
MatButtonModule,
MatToolbarModule,
MatExpansionModule
} from "@angular/material";

import { AppComponent } from "./app.component";
import {PostCreateComponent} from './posts/posts_create/post-create-components';
import { HeaderComponent } from "./header/header.component";
import { PostListComponent } from './posts/posts_create/post-list/post-list.component';

@NgModule({
declarations: [
AppComponent,
PostCreateComponent,
HeaderComponent,
PostListComponent
],
imports: [
BrowserModule,
FormsModule,
BrowserAnimationsModule,
MatInputModule,
MatCardModule,
MatButtonModule,
MatToolbarModule,
MatExpansionModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}

Comment

Watch Question

View Solution Only

Julian Hansen

Trusted Expert

Most Valuable Expert 2017

Distinguished Expert 2019

Commented: 2020-02-01

This sounds like you did this

<app-post-list [post]="post">...</app-post-list>

Open in new window

Without declaring post as an @Input on the app-post-component

import { Component, OnInit, OnDestroy, Input } from "@angular/core";
import { Subscription } from 'rxjs';
 
import { Post } from "../../post.model";
import { PostsService } from "../../posts.service";
@Component({
  selector: "app-post-list",
  templateUrl: "./post-list.component.html",
  styleUrls: ["./post-list.component.css"]
})
export class PostListComponent implements OnInit, OnDestroy {
@Input() post; // <==== MISSING

Open in new window

Show us how you are using <app-post-list>

chalie001

Author

Commented: 2020-02-02

this my app post list

import { Component, OnInit, OnDestroy } from "@angular/core";
import { Subscription } from 'rxjs';

import { Post } from "../../post.model";
import { PostsService } from "../../posts.service";

@Component({
  selector: "app-post-list",
  templateUrl: "./post-list.component.html",
  styleUrls: ["./post-list.component.css"]
})
export class PostListComponent implements OnInit, OnDestroy {
  // posts = [
  //   { title: "First Post", content: "This is the first post's content" },
  //   { title: "Second Post", content: "This is the second post's content" },
  //   { title: "Third Post", content: "This is the third post's content" }
  // ];
  posts: Post[] = [];
  private postsSub: Subscription;

  constructor(public postsService: PostsService) {}

  ngOnInit() {
    this.posts = this.postsService.getPosts();
    this.postsSub = this.postsService.getPostUpdateListener()
      .subscribe((posts: Post[]) => {
        this.posts = posts;
      });
  }

  ngOnDestroy() {
    this.postsSub.unsubscribe();
  }
}

Open in new window

my post create is

import { Component } from "@angular/core";
import { NgForm } from "@angular/forms";

import { PostsService } from "../posts.service";

@Component({
  selector: "app-post-create",
  templateUrl: "./posts-create-component.html",
  styleUrls: ["./post-create-components.css"]
})
export class PostCreateComponent {
  enteredTitle = "";
  enteredContent = "";

  constructor(public postsService: PostsService) {}

  onAddPost(form: NgForm) {
    if (form.invalid) {
      return;
    }
    this.postsService.addPost(form.value.title, form.value.content);
    form.resetForm();
  }
}

Open in new window

Julian Hansen

Trusted Expert

Most Valuable Expert 2017

Distinguished Expert 2019

Commented: 2020-02-02

That is not what I asked

I wanted to know where you are using the <app-post-list> element.

You are showing me .ts code - you need to be showing me your template (.html code).

Somewhere you have an <app-post-list> in a template - that is what I need to see.

chalie001

Author

Commented: 2020-02-02

hi you mean this

<mat-accordion multi="true" *ngIf="posts.length > 0">
    <mat-expansion-panel *ngFor="let post of posts">
        <mat-expansion-panel-header>
        {{post.title}}
        </mat-expansion-panel-header>
       <p>{{post.content}}</p>
    </mat-expansion-panel>
</mat-accordion>
<p class="info-text mat-body-1" *ngIf="posts.length <= 0">no post added yet</p>


====
<mat-card>
    <form (submit)="onAddPost(postForm)" #postForm="ngForm">
      <mat-form-field>
        <input
          matInput
          type="text"
          name="title"
          ngModel
          required
          minlength="3"
          placeholder="Post Title"
          #title="ngModel">
        <mat-error *ngIf="title.invalid">Please enter a post title.</mat-error>
      </mat-form-field>
      <mat-form-field>
        <textarea
          matInput
          rows="4"
          name="content"
          ngModel
          required
          placeholder="Post Content"
          #content="ngModel"></textarea>
        <mat-error *ngIf="content.invalid">Please enter a post title.</mat-error>
      </mat-form-field>
      <button
        mat-raised-button
        color="accent"
        type="submit">Save Post</button>
    </form>
  </mat-card>

Open in new window

Julian Hansen

Trusted Expert

Most Valuable Expert 2017

Distinguished Expert 2019

Commented: 2020-02-02

No I don't.

Let's start with this file AppComponent.html
And your Route definition.

chalie001

Author

Commented: 2020-02-03

this html

<app-header></app-header>
<main>
<app-post-create (postCreated)="onPostAdded($event)"></app-post-create>
<app-post-list [posts]="storedPosts"></app-post-list>
</main>

my service is
import {Injectable } from '@angular/core';
import { Subject } from 'rxjs';

import {Post} from './post.model';

@Injectable({providedIn: 'root'})
export class PostsService{
private posts: Post[] = [];
private postsUpdated = new Subject<Post[]>();

getPosts(){
return [...this.posts];
}

getPostUpdateListener(){
return this.postsUpdated.asObservable();
}

addPost(title: string, content: string){
const post: Post = {title: title,content: content};
this.posts.push(post);
this.postsUpdated.next([...this.posts]);

}
}

Julian Hansen

Trusted Expert

Most Valuable Expert 2017

Distinguished Expert 2019

Commented: 2020-02-03

Yes that code

<app-post-list [posts]="storedPosts"></app-post-list>
//             ^^^^^^^

Open in new window

You are telling Angular your component (app-post-list) has an attribute posts - but the component definition (.ts file) nowhere are you specifying that attribute as an @Input - that is what is causing the error.

In your component you need to add

@Input: posts

Open in new window

chalie001

Author

Commented: 2020-02-03

you mean this component

import { Component, OnInit, OnDestroy } from "@angular/core";
import { Subscription } from 'rxjs';

import { Post } from "../../post.model";
import { PostsService } from "../../posts.service";

@Component({
  selector: "app-post-list",
  templateUrl: "./post-list.component.html",
  styleUrls: ["./post-list.component.css"]
})
export class PostListComponent implements OnInit, OnDestroy {
  // posts = [
  //   { title: "First Post", content: "This is the first post's content" },
  //   { title: "Second Post", content: "This is the second post's content" },
  //   { title: "Third Post", content: "This is the third post's content" }
  // ];
  posts: Post[] = [];
  private postsSub: Subscription;

  constructor(public postsService: PostsService) {}

  ngOnInit() {
    this.posts = this.postsService.getPosts();
    this.postsSub = this.postsService.getPostUpdateListener()
      .subscribe((posts: Post[]) => {
        this.posts = posts;
      });
  }

  ngOnDestroy() {
    this.postsSub.unsubscribe();
  }
}

Open in new window

where must i add @Input: posts

Julian Hansen

Trusted Expert

Most Valuable Expert 2017

Distinguished Expert 2019

Commented: 2020-02-03

where must i add @Input: posts

Are you familiar with inter-component communication techniques?

https://angular.io/api/core/Input

If not then I recommend you get up to speed on that.

If we want to pass data to a component from a parent component we can either use a component attribute (@Input) or a service.

There are pros and cons depending on the use case both have their place.

If you have a parent component that has - say a list of posts and you want to render that list out but don't want to include the template for each post in the parent template you can create a child template and pass the post object to the child using a bound attribute.

So in the parent you have

<app-post-list [posts]="storedPosts"></app-post-list>

Open in new window

This is telling Angular to create a component with the selector app-post-list and pass it the data stored in the variable storedPosts.

So far you have this - but on the component side we need to tell Angular to expect this incoming data

To do that we use the @Input decorator

This goes in the root of your class definition and specifies the incoming bound attributes
So in your code you would need to change a few things

1. You need to import the Import component to your component
2. You need to declare a posts input variable
3. You need to remove the posts variable you have defined as that is not required

// ***********==> Import Input
import { Component, OnInit, OnDestroy, Input } from "@angular/core";
import { Subscription } from 'rxjs';

import { Post } from "../../post.model";
import { PostsService } from "../../posts.service";

@Component({
  selector: "app-post-list",
  templateUrl: "./post-list.component.html",
  styleUrls: ["./post-list.component.css"]
})
export class PostListComponent implements OnInit, OnDestroy {
// ***********==>  Add an Input for your bound attribute
@Input() posts;
  // posts = [
  //   { title: "First Post", content: "This is the first post's content" },
  //   { title: "Second Post", content: "This is the second post's content" },
  //   { title: "Third Post", content: "This is the third post's content" }
  // ];

// ***********==> Remove the posts variable you had before
//  posts: Post[] = [];
  private postsSub: Subscription;

  constructor(public postsService: PostsService) {}

  ngOnInit() {
    // ***********==> If you are passing posts INTO your component - you don't need to get them
    // ***********==> from the service.
    /*
    this.posts = this.postsService.getPosts();
    this.postsSub = this.postsService.getPostUpdateListener()
      .subscribe((posts: Post[]) => {
        this.posts = posts;
      });
    */
  }

 // You don't need onDestroy anymore as you are getting posts from the parent and not subscribing to anything in this component
  ngOnDestroy() {
//    this.postsSub.unsubscribe();
  }
}

Open in new window

chalie001

Author

Commented: 2020-02-03

am geting this error

import { Component, OnInit, OnDestroy } from "@angular/core";
import { Subscription } from 'rxjs';

import { Post } from "../../post.model";
import { PostsService } from "../../posts.service";

@Component({
  selector: "app-post-list",
  templateUrl: "./post-list.component.html",
  styleUrls: ["./post-list.component.css"]
})
export class PostListComponent implements OnInit, OnDestroy {
  @Input() posts;
  // posts = [
  //   { title: "First Post", content: "This is the first post's content" },
  //   { title: "Second Post", content: "This is the second post's content" },
  //   { title: "Third Post", content: "This is the third post's content" }
  // ];
 // posts: Post[] = [];
  private postsSub: Subscription;

  constructor(public postsService: PostsService) {}

  ngOnInit() {
    /*
    this.posts = this.postsService.getPosts();
    this.postsSub = this.postsService.getPostUpdateListener()
      .subscribe((posts: Post[]) => {
        this.posts = posts;
      });
      */
  }

 // ngOnDestroy() {
   // this.postsSub.unsubscribe();
 // }
}

Open in new window

Julian Hansen

Trusted Expert

Most Valuable Expert 2017

Distinguished Expert 2019

Commented: 2020-02-03

1. You have commented out ngDestroy but your class still says it implements this interface you have to remove the onDestroy from the implementation list

export class PostListComponent implements OnInit

Open in new window

2. You have not imported Input

chalie001

Author

Commented: 2020-02-03

am geting this error now

Julian Hansen

Trusted Expert

Most Valuable Expert 2017

Distinguished Expert 2019

Commented: 2020-02-03

From my last post

You have not imported Input

From my post before that and the one before that (https://www.experts-exchange.com/questions/29171382/app-having-error-when-starting.html#a43022036)

import { Component, OnInit, OnDestroy, Input } from "@angular/core";

Open in new window

app having error when starting

Premium Content

Premium Content

View Solution Only