title: Function expressions are not supported in decorators
body: <p>I am trying to deploy my Angular app to heroku. However, if I run  </p>
  
  <pre><code>git push heroku master
  </code></pre>
  
  <p>During compilation I am getting</p>
  
  <pre><code>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.
  </code></pre>
  
  <p>But there is no <code>ɵ0</code> referenced in my <code>LoginComponent</code>:</p>
  
  <p><strong>login.animation.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import {
    sequence, trigger, stagger, animate, style, group, query as q, transition, keyframes, animateChild,
    state
  } from '@angular/animations';
  const query = (s,a,o={optional:true})=&gt;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('* =&gt; 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})
      ])
  
  ]);
  </code></pre>
  
  <p><strong>login.component.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>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']);
      }
    }
  
  }
  </code></pre>
  
  <p>So what exactly is the problem here?</p>
  
  <hr>
  
  <p>I tried replacing</p>
  
  <pre class="lang-js prettyprint-override"><code>const query = (s,a,o={optional:true})=&gt;q(s,a,o);
  </code></pre>
  
  <p>with</p>
  
  <pre class="lang-js prettyprint-override"><code>export function query(s, a, o={optional:true}) {
    return q(s,a,o);
  }
  </code></pre>
  
  <p>but that didn't help either .. </p>