Angular 应用程序编译成功，但在“ng build --prod”中不存在提供错误属性答案

【问题标题】：Angular app is compiling successfully but giving errors property does not exist in 'ng build --prod'Angular 应用程序编译成功，但在“ng build --prod”中不存在提供错误属性
【发布时间】：2020-10-07 10:14:20
【问题描述】：

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文件

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

dashboard.component.htmlfile

<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));
          });
        }) 
  }
}

无法准确找出错误在哪里！

【问题讨论】：

你可以使用 ng build 没有 --prod 和 npm publish

标签： javascript angular typescript build

【解决方案1】：

我认为错误描述尽可能准确。他们每个人都告诉你你的组件有问题，让我们检查他们每个人

错误：

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

您在HeaderComponent HTML 中有 searchText，但在组件本身中没有

解决方案：将 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'.

你在模板中使用的所有字段，必须是组件内部的公共字段，否则无法编译

解决方案：在 newService 处将 private 修饰符更改为 public

@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
       ...
    }

【讨论】：

【解决方案2】：

您正在尝试从模板访问未在相应组件中定义的变量。

在 header.component.html 中，您正在设置 [ngModel]="searchText" 并且变量 searchText 未在 header.component.ts 上定义。会不会是 filterText 变量？

在 dashboard.component.html 中，您正在设置 p = $event 并且变量 p 未在 dashboard.component.ts 上定义。您还有一个关于 newsService 是私有的错误。如果您要在模板中使用它，则必须在构造函数中将其声明为 public。我希望这有帮助。如果您需要更多帮助，最好以最少的代码提供 Stackblitz。

【讨论】：