0

我很难用 ng build --prod

问题出在组件 IndexComponent 中：

index.component.ts

import { Component, OnInit } from '@angular/core';
import { indexTransition } from './index.animations';

@Component({
  selector: 'app-index',
  templateUrl: './index.component.html',
  styleUrls: ['./index.component.scss'],
  animations: [ indexTransition ],
  host: {
    '[@indexTransition]': ''
  }
})

export class IndexComponent implements OnInit {
  constructor() {
  }

  ngOnInit() {
  }
}

如您所见，它调用 index.animations （在同一文件夹中）

索引.动画.ts

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

export const indexTransition = trigger('indexTransition', [
  transition(':enter', [
    query('.iw-path', [
      style({'stroke': '#000'}) 
    ], { optional: true }),
    group([
      query('.iw-path--w', [
        style({'stroke-dashoffset': '100'}),
        animate('3.5s cubic-bezier(.1,.15,.18,1)', style({'stroke-dashoffset': '0'})),
      ], { optional: true }),
      query('.iw-path--basic', [
        style({'stroke-dashoffset': '50'}),
        animate('3.5s cubic-bezier(.1,.15,.18,1)', style({'stroke-dashoffset': '0'})),
      ], { optional: true }),
      query('.iw-path', [
          style({'stroke': '#000'}),
          animate('.5s 2s', style({'stroke': '#e01f1f'})),
      ], { optional: true })
    ]),
  ]),
  transition(':leave', [
    group([
      query('.iw-path--w', [
        style({'stroke-dashoffset': '0'}),
        animate('.5s cubic-bezier(.1,.15,.18,1)', style({'stroke-dashoffset': '100'})),
      ], { optional: true }),
      query('.iw-path--basic', [
        style({'stroke-dashoffset': '0'}),
        animate('.5s cubic-bezier(.1,.15,.18,1)', style({'stroke-dashoffset': '50'})),
      ], { optional: true })
    ]),
  ])
]);

这在我使用 ng serve 进行测试时效果很好，但是在使用“build --prod”进行编译时出现以下错误

app\index\index.component.ts(8,17) 中的错误：'IndexComponent' 模板编译期间出错 'indexTransition' 中的装饰器不支持函数表达式 'indexTransition' 引用 'ɵ0' 'ɵ0' 包含错误app\index\index.animations.ts(2,15) 考虑将函数表达式更改为导出函数。

我的环境

角 CLI：1.7.4

节点：8.10.0

操作系统：win32 x64

角度：5.2.11

该错误与此主题非常相似，但接受的答案对我不起作用（如您所见，我尝试在所有查询中输入 optional:true ）。我的问题是：在这种情况下，我应该如何“将函数表达式更改为导出函数”？还是有更简单的方法来绕过这个错误？抱歉，我对 Angular 很陌生。

感谢您的帮助，抱歉英语不好，如果我的问题中缺少某些内容，请告诉我。

4

1 回答 1

0

不完全确定，但这不可行吗？

在 index.component.ts 中

    animations: [
    Animations.indexTransition
    ]

在 index.animations.ts

export const Animations = {
  indexTransition: trigger('indexTransition', [
    transition(':enter', [
      q('.iw-path', [
        style({'stroke': '#000'})
      ], { optional: true }),
      group([
        q('.iw-path--w', [
          style({'stroke-dashoffset': '100'}),
          animate('3.5s cubic-bezier(.1,.15,.18,1)', style({'stroke-dashoffset': '0'})),
        ], { optional: true }),
        q('.iw-path--basic', [
          style({'stroke-dashoffset': '50'}),
          animate('3.5s cubic-bezier(.1,.15,.18,1)', style({'stroke-dashoffset': '0'})),
        ], { optional: true }),
        q('.iw-path', [
          style({'stroke': '#000'}),
          animate('.5s 2s', style({'stroke': '#e01f1f'})),
        ], { optional: true })
      ]),
    ]),
    transition(':leave', [
      group([
        q('.iw-path--w', [
          style({'stroke-dashoffset': '0'}),
          animate('.5s cubic-bezier(.1,.15,.18,1)', style({'stroke-dashoffset': '100'})),
        ], { optional: true }),
        q('.iw-path--basic', [
          style({'stroke-dashoffset': '0'}),
          animate('.5s cubic-bezier(.1,.15,.18,1)', style({'stroke-dashoffset': '50'})),
        ], { optional: true })
      ]),
    ])
  ])
};
于 2018-06-14T11:51:06.770 回答