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.component.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">

这段代码之所以有效，是因为未定义 loading 且！falsy = true，并且ng build不会显示任何错误，因为在ng build时它不会检查是否存在该错误-产品会检查它。

您的 loading 变量应位于每个组件上，并且应控制是否可以显示它们

有用的文章

AOT compiler

Angular Deployment

-prod元标记具有以下构建优化功能。

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

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

捆绑：将您的许多应用程序和库文件合并为几个捆绑。

缩小：删除多余的空格，注释和可选标记。

丑陋化：重写代码以使用简短的，隐秘的变量和函数名。

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

ng build --prod时，类型“ TournamentsComponent”上不存在属性“ loading”

1 个答案: