我有几个（和简单的）动画在桌面Chrome，FF和Android浏览器中使用＆＃34; ng serve＆＃34;正常运行。
但是当我构建应用程序并将其部署到Web服务器（Apache）时，动画根本无法在任何浏览器上运行。
需要帮助解决这个问题。 我可以通过以下步骤重现错误：
1）新的animtest
2）打开app.component.ts并粘贴
下面的内容3）修改app.module.ts以包含＆＃39; BrowserAnimationsModule＆＃39;
4）ng服务
5）点击Chrome和FF时，动画正确动画
6）Ctrl + c（服务器已停止）
7）ng build --prod --base-href / app /
8）复制＆＃39; dist＆＃39;的内容。到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 --version：
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：使用＆＃34; ng serve --prod＆＃34;运行应用时的相同行为。
编辑3：这很有效：动画在关闭构建优化器时起作用。
ng build --prod --build-optimizer false --base-href / app