装饰器不支持函数表达式。

Question

我正在尝试将我的Angular应用部署到Heroku。然而，如果我运行以下命令:

git push heroku master

在编译过程中我遇到了以下问题：

remote:        ERROR in app/component/login/login.component.ts(24,5): Error during template compile of 'LoginComponent'
remote:          Function expressions are not supported in decorators in 'listAnimation'
remote:            'listAnimation' references 'ɵ0'
remote:              'ɵ0' contains the error at app/component/login/login.animation.ts(5,15)
remote:                Consider changing the function expression into an exported function.

但是在我的LoginComponent中没有引用ɵ0：

login.animation.ts

import {
  sequence, trigger, stagger, animate, style, group, query as q, transition, keyframes, animateChild,
  state
} from '@angular/animations';
const query = (s,a,o={optional:true})=>q(s,a,o);

export const listAnimation = trigger('listAnimation', [

  transition(':enter', [
    query('.container', style({opacity: 0}), {optional: true}),
    query('.container', stagger('150ms', [
      animate('150ms ease-in', keyframes([
        style({opacity: 0, transform: 'translateY(100%)', offset: 0}),
        style({opacity: 1, transform: 'translateY(0)', offset: 1.0})
      ]))]), {optional: true})
  ]),

  transition('* => loggedIn', [
    query('.container', style({opacity: 1}), {optional: true}),
      query('.container', stagger('-150ms', [
        animate('150ms ease-in', keyframes([
          style({opacity: 1, transform: 'translateY(0)', offset: 0}),
          style({opacity: 0, transform: 'translateY(100%)', offset: 1.0})
        ]))]), {optional: true})
    ])

]);

登录组件.ts

import {Component, HostListener, OnInit} from '@angular/core';
import {FormBuilder, Validators} from '@angular/forms';
import {HttpClient} from '@angular/common/http';
import {AuthenticationService} from '../../service/authentication.service';
import {Router} from '@angular/router';
import {NGXLogger} from 'ngx-logger';
import {listAnimation} from './login.animation';
import {Subject} from 'rxjs/Subject';
import {Observable} from 'rxjs/Observable';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
  styles: [`
      .mat-card {
        margin: 5%;
        max-width: 300px;
      }
      .mat-form-field {
        width: 100%;
      }`],
  animations: [
    listAnimation
  ],
  host: {
    '[@listAnimation]': 'true'
  }
})
export class LoginComponent implements OnInit {

  viewState: string = 'init';    

  constructor(private http: HttpClient,
              private router: Router, private logger: NGXLogger) { }

  ngOnInit(): void {
    if (AuthenticationService.isLoggedIn()) {
      this.logger.debug('Already logged in. Goto /home.');
      this.router.navigate(['/home']);
    }
  }

  onSubmit(): void {

    this.viewState = 'loggedIn';
  }

  animationDone() {
    this.logger.info('animationDone');
    if (this.viewState == 'loggedIn') {
      this.router.navigate(['/home']);
    }
  }

}

那么问题到底出在哪里？

---

我尝试替换

const query = (s,a,o={optional:true})=>q(s,a,o);

with

export function query(s, a, o={optional:true}) {
  return q(s,a,o);
}

但那也没有帮助...

- Stefan Falk

---

const query = (s,a,o={optional:true})=>q(s,a,o); 是您的问题。正如构建错误所建议的那样，考虑将其更改为导出函数。您能否也发布使用这些动画的模块的代码？ - user4676340

@trichetriche 嗯，我尝试过了 - 但是它并没有改变错误。我已经添加了组件的代码。 - Stefan Falk

这个问题涉及到很多方面，当你尝试创建路由函数时也会出现这种情况。如果他们建议的方法不起作用，考虑将此函数移动到另一个文件并导出它，如果仍然无法解决问题，那么就回到老式的硬编码{ optional: true }直接在查询中使用！ - user4676340

@trichetriche 好的，我已经让它好用了。你说得对。把它翻译成导出函数就解决了问题。但这太奇怪了 - 为什么生产环境下不起作用呢.. - Stefan Falk

是的，我试过了，但无法正确运行。最好能告诉我你实际上是怎么解决的，而不是给我一个 GitHub 问题链接。 - Steve Fitzsimons

Answer 1

在我的情况下，错误是由以下原因引起的：

export const listAnimation = ()...

改为：

export function listAnimation()...

- Mardari

Answer 2

根据您的错误提示，您需要导出该函数。装饰器不接受将函数调用作为其属性。

您可以在此github问题中找到更多信息：https://github.com/angular/angular/issues/15587

- user4676340

Answer 3

您需要像这样重构代码：

{
  provide: APP_INITIALIZER,
  useFactory: loadStuff,
  deps: [InitRolesService],
  multi: true
}

然后导出功能

export function loadStuff(service: InitService) {
   return () => service.load().subscribe(data => { ... }));
}

- Kuzenko Lubko