Angular 5：动画在构建后不会触发

Question

当使用“ng serve”运行应用程序时，我有几个（简单的）动画在桌面 Chrome、FF 和 Android 浏览器中运行良好。

但是当我构建应用程序并将其部署到 Web 服务器 (Apache) 时，动画根本无法在任何浏览器上运行。

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

1) 新的动画测试

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

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

4) 服务

5) 当点击 Chrome 和 FF 时，动画正确动画

6) Ctrl + c（服务器停止）

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

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

9) 在 Chrome 和 FF 中打开 http://localhost/app

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;
}

app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
@NgModule({
 declarations: [
 AppComponent
 ],
 imports: [
 BrowserModule,
 BrowserAnimationsModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

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

编辑：由于我在浏览器控制台中没有收到任何错误，因此动画可能在构建期间根本没有导出（？）。这可能是 Angular CLI 错误吗？

有人可以运行这个组件（上图）并确认开发和构建变体的不同行为吗？

编辑 2：使用“ng serve --prod”运行应用时的行为相同。

编辑 3：这行得通：当关闭构建优化器时动画工作。

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

Answer 1

原来这是一个错误，并已通过20725 修复

另见： 20685 和 20374