当 ng build --prod 时，类型"锦标赛组件"上不存在属性"加载"

Question

当我运行时

ng build

一切都很好，我没有警告，没有错误

但是当我运行时

ng build --prod

我遇到了一个名为loading的变量的问题：

ERROR in src/app/components/tournaments/tournaments-index/tournaments.component.html(1,24): : Property 'loading' does not exist on type 'TournamentsComponent'.

在tournaments.component.html中，我做：

<div class="container" *ngIf="!loading">

但loading不是组件的一部分，而是所有页面中NavComponent的一部分。

app.component.html

<app-nav *ngIf="auth.currentUser()"></app-nav>
<router-outlet></router-outlet>
<app-footer></app-footer>

nav.com组件.ts

@Component({
selector: 'app-nav',
templateUrl: './nav.component.html',
styleUrls: ['./nav.component.scss']
})
export class NavComponent implements OnInit {
user: User;
loading = false;
avatar_src = 'assets/images/avatar/avatar.png';
title: string;

constructor(
public auth: AuthenticationService,
private nav: NavService
) {
} 
...

我该怎么修？？？

Answer 1

您不能像这样指向另一个组件中的变量。(没有@Input或捕获事件、订阅…(

<div class="container" *ngIf="!loading">

这段代码之所以有效，是因为加载是未定义的！falsy=true，而且ng-build不会显示任何错误，因为它不会检查它是否存在，而ng-build-prod会检查它。

您的加载变量应该在每个组件上，它们应该控制它们是否准备好显示

有用的文章：

AOT编译器

角度部署

--prod元标志使用以下构建优化功能。

提前编译(AOT(：预编译Angular组件模板。

生产模式：部署启用生产模式的生产环境。

捆绑：将许多应用程序和库文件连接到几个捆绑包中。

最小化：删除多余的空白、注释和可选标记。

丑化：重写代码以使用简短、神秘的变量和函数名称。

死代码消除：删除未引用的模块和大量未使用的代码。