Angular приложение успешно компилируется, но свойство error не существует в 'ng build --prod'

Question

Angular приложение успешно компилируется, но выдает следующие ошибки в 'ng build --prod'

ERROR in src\app\header\header.component.html(31,124): : Property 'searchText' does not exist on type 'HeaderComponent'.
src\app\dashboard\dashboard.component.html(3,72): : Property 'newsService' is private and only accessible within class 'DashboardComponent'.
src\app\dashboard\dashboard.component.html(3,72): : Property 'p' does not exist on type 'DashboardComponent'.
src\app\dashboard\dashboard.component.html(29,46): : Property 'p' does not exist on type 'DashboardComponent'.

Я использовал эти свойства в моем html файле, как показано ниже: header.component.html file

<input type="text" class="form-control mr-2 align-self-center" required placeholder="Search" name="searchText" [ngModel]="searchText" value="">

dashboard.component.html файл

<pagination-controls class="text-center" (pageChange)="p = $event"></pagination-controls>

мой header.component.html файл

import { Component,  OnInit, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
  filterText : string;
@Output() search = new EventEmitter();
@Output() filterButton = new EventEmitter();

  constructor() { }

  ngOnInit() {

  }

  onSubmit(form : NgForm)
  {
    console.log(form);
    this.search.emit(form);
  }

  filterClicked($event)
  {
    this.filterText = $event.target.text;
    this.filterButton.emit(this.filterText);
  }
}

мой dashboard.component.html файл

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { NewsService } from '../shared/news.service';
import { NewsModel } from '../shared/news.model';
import { Form } from '@angular/forms';
import { Pipe, PipeTransform } from '@angular/core';
import { element } from 'protractor';
@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  articles : any;
  temp : NewsModel = new NewsModel;
  constructor(private newsService : NewsService) { }

  ngOnInit() {
      this.FetchHeadlines();
           }

  FetchHeadlines()
  {
     this.newsService.GetAllGaurdian()
        .subscribe((result) =>
        {
          this.articles = result;
                  this.articles.response.results.forEach(element => {
                       this.newsService.newsArticles.push(this.newsService.CusotomMapper(element));
          });
        }) 
  }
}

не могу понять, где именно ошибка!

Answer 1

Вы пытаетесь получить доступ из шаблона к переменным, которые не определены в соответствующих компонентах.

В header.component. html вы устанавливаете [ngModel]="searchText" и переменная searchText не определена в header.component.ts . Может быть, это переменная filterText ?

In dashboard.component. html вы устанавливаете p = $event и переменную p isn ' t определяется на dashboard.component.ts . У вас также есть ошибка, что newsService является приватным. Если вы собираетесь использовать его в шаблоне, он должен быть объявлен как publi c, когда вы вставляете его в конструктор. Надеюсь, это поможет. Если вам нужна дополнительная помощь, лучше предоставить Stackblitz с минимальным кодом.

Answer 2

Я думаю, что описания ошибок настолько точны, насколько это возможно. каждый из них сообщает вам, что с вашим компонентом что-то не так, давайте рассмотрим каждый из них

ERROR:

ERROR in src\app\header\header.component.html(31,124): : Property 'searchText' does not exist on type 'HeaderComponent'.

у вас есть searchText in HeaderComponent HTML , но не в самом Компоненте

РЕШЕНИЕ: добавьте переменную searchText в Компонент

    @Component({
      selector: 'app-header',
      templateUrl: './header.component.html',
      styleUrls: ['./header.component.css']
    })
    export class HeaderComponent implements OnInit {
      searchText:string
      ...
    }

ОШИБКА:

src\app\dashboard\dashboard.component.html(3,72): : Property 'newsService' is private and only accessible within class 'DashboardComponent'.

все поля, которые вы используете внутри шаблона , должно быть поле publi c внутри самого компонента, иначе он не будет компилироваться

РЕШЕНИЕ: измените приватный модификатор на publi c в newService

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {


  constructor(public newsService : NewsService) { }
...
}

ОШИБКИ:

src\app\dashboard\dashboard.component.html(3,72): : Property 'p' does not exist on type 'DashboardComponent'.
src\app\dashboard\dashboard.component.html(29,46): : Property 'p' does not exist on type 'DashboardComponent'.

то же, что и HeaderComponent. вы используете поле p , но оно не определено в DashboardComponent

РЕШЕНИЕ: добавьте поле p в компонент панели инструментов

 @Component({
      selector: 'app-dashboard',
      templateUrl: './dashboard.component.html',
      styleUrls: ['./dashboard.component.css']
    })
    export class DashboardComponent implements OnInit {
       p:any
       ...
    }