Angular 5:制作后不会触发动画 [英] Angular 5: Animations won't trigger after build

问题描述

我有几个(简单的)动画，当使用"ng serve"运行应用程序时，它们在台式机Chrome，FF和Android浏览器中都能正常工作.

I have several (and simple) animations which work fine in desktop Chrome, FF and Android browsers when running the app with "ng serve".

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

But when I build the app and deploy it to a web server (Apache) the animations won't work on any browser at all.

需要帮助解决此问题. 我可以按照以下步骤重现该错误:

Need help in solving this. I can reproduce the error with the following steps :

1)进行新的动画测试

1) ng new animtest

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

2) opened app.component.ts and pasted content below

3)修改了app.module.ts，使其包含"BrowserAnimationsModule"

3) modified app.module.ts to include 'BrowserAnimationsModule'

4)ng服务

5)单击Chrome和FF可以正确动画动画

5) when clicked Chrome and FF animate the animation correctly

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

6) Ctrl + c (server stopped)

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

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

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

8) copied content of 'dist' to Apache (folder /var/www/html/app)

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

9) in Chrome and FF opened http://localhost/app

10)动画无效

app.component.ts:

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:

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:

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错误吗?

Since I don't get any errors in browser console, maybe the animations don't get exported during build at all (?). Could this be an Angular CLI bug ?

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

Could anybody please run this component (above) and confirm the different behavior of the dev and built variants ?

使用"ng serve --prod"运行应用程序时，行为相同.

Edit 2: same behavior when running the app with "ng serve --prod".

工作正常:关闭构建优化程序时，动画有效.

Edit 3: This worked : animations work when build-optimizer is turned off.

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

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

推荐答案

证明这是一个错误，并已通过 20725

turns out this is a bug and is fixed with 20725

另请参阅: 20685 和 查看全文