装饰器不支持函数表达式

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.

但是?0我没有引用LoginComponent：

login.animation.ts

git push heroku master

login.component.ts

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.

那到底是什么问题呢？

---

我尝试更换

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

]);

与

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

}

但这也没有帮助..

Answer 1

就我而言，错误是由以下原因引起的：

export const listAnimation = ()...

代替：

export function listAnimation()...

Answer 2

正如您的错误所述，您需要导出函数。装饰器不接受对其属性的函数调用。

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

Answer 3

您需要像这样重构代码：

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

然后导出函数

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