Angular 角度5:动画获胜';生成后不触发

Angular 角度5:动画获胜';生成后不触发,angular,Angular,我有几个(简单的)动画,在桌面Chrome、FF和Android浏览器中运行带有“ng serve”的应用程序时效果很好 但是,当我构建应用程序并将其部署到web服务器(Apache)时,动画在任何浏览器上都无法工作 需要帮助解决这个问题。 我可以通过以下步骤再现错误: 1) 新动物试验 2) 打开app.component.ts并在下面粘贴内容 3) 修改app.module.ts以包括“BrowserAnimationsModule” 4) ng发球 5) 单击Chrome和FF时,请正确设

我有几个(简单的)动画,在桌面Chrome、FF和Android浏览器中运行带有“ng serve”的应用程序时效果很好

但是,当我构建应用程序并将其部署到web服务器(Apache)时,动画在任何浏览器上都无法工作

需要帮助解决这个问题。 我可以通过以下步骤再现错误:

1) 新动物试验

2) 打开app.component.ts并在下面粘贴内容

3) 修改app.module.ts以包括“BrowserAnimationsModule”

4) ng发球

5) 单击Chrome和FF时,请正确设置动画动画

6) Ctrl+c(服务器已停止)

7) ng build--prod--base href/app/

8) 已将“dist”的内容复制到Apache(文件夹/var/www/html/app)

9) 在Chrome和FF中打开

10) 动画不起作用

app.component.ts:

import { Component } from '@angular/core';
import {
 trigger,
 state,
 transition,
 animate,
 style,
 keyframes
} from '@angular/core';
export const collapseTrigger = trigger('collapse', [
 state('collapsed, true, void', style({
 height: '0',
 opacity: '0',
 overflow: 'hidden'
 })),
 state('expanded, false', style({
 height: '*',
 opacity: '1',
 overflow: 'hidden'
 })),
 transition('true => false, collapsed => expanded', [
 animate('300ms ease', keyframes([
 style({ opacity: '1' }),
 style({ height: '*' })
 ]))
 ]),
 transition('false => true, expanded => collapsed', [
 animate('300ms ease', style({ height: '0' }))
 ])
]);
@Component({
 selector: 'app-root',
 template: `
 <div style="width: 700px">
 <div style="padding: 30px; background-color: rgba(0, 0, 255, 0.5);"
 (click)="collapsed = !collapsed">
 Click to expand / collapse
 </div>
 <div style="width: 500px; height: 0; opacity: 0; overflow: 'hidden'"
 [@collapse]="collapsed">
 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
 text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
 It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
 It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
 with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 </div>
 </div>
 `,
 styleUrls: [],
 animations: [collapseTrigger]
})
export class AppComponent {
 collapsed = true;
}
ng--版本:

Angular CLI: 1.5.2
Node: 9.2.0
OS: linux x64
Angular: 5.0.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.5.2
@angular-devkit/build-optimizer: 0.0.33
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.36
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.2
@schematics/angular: 0.1.5
typescript: 2.4.2
webpack: 3.8.1
编辑:由于我在浏览器控制台中没有收到任何错误,可能动画在构建期间根本不会导出(?)。这可能是一个错误吗

任何人都可以运行这个组件(上面)并确认dev和build变体的不同行为吗

编辑2:使用“ng serve--prod”运行应用程序时的相同行为

编辑3:这起作用:动画在构建优化器关闭时起作用


ng build--prod--build optimizer false--base href/app

结果表明这是一个bug,已通过

另见:

您有任何错误吗?没有,根本没有错误(在浏览器控制台中):(
Angular CLI: 1.5.2
Node: 9.2.0
OS: linux x64
Angular: 5.0.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.5.2
@angular-devkit/build-optimizer: 0.0.33
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.36
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.2
@schematics/angular: 0.1.5
typescript: 2.4.2
webpack: 3.8.1