Animations won't trigger after build

[mehmetgunacti]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Animations work when served via "ng serve", but won't trigger when served after "ng build".

Expected behavior

Minimal reproduction of the problem with instructions

Here's how to recreate the error inside one simple file: app.component.ts

1. ng new animtest

2. opened app.component.ts in notepad and pasted content below

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

4. ng serve

5. when clicked Chrome and FF animate the animation correctly

6. Ctrl + c (server stopped)

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

8. copied content of 'dist' to folder /var/www/html/app

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

10. animations don't work

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

What is the motivation / use case for changing the behavior?

Environment

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 version: X.Y.Z


Browser:
- [x] Chrome (desktop) version 62
- [x] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [x] Firefox version 57
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

[mehmetgunacti]

Animations also don't work when running the app with "ng serve --prod".

[mehmetgunacti]

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

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

Is this a bug ?

[fxck]

dupe of #20374

[matsko]

This guy fixes it: #20725

[mehmetgunacti]

#20725 is closed now.

Sorry for asking such a basic question, but what exactly does that mean ?
Do I have to wait for a new release or can I update Angular installation right now ?

[matsko]

The next release will be next week. If you want to use the HEAD release of Angular, just point your NPM deps to angular/PACKAGE-builds like so:

    "@angular/animations": "git://github.com/angular/animations-builds.git",
    "@angular/common": "git://github.com/angular/common-builds.git",
    "@angular/compiler": "git://github.com/angular/compiler-builds.git",
    "@angular/core": "git://github.com/angular/core-builds.git",
    "@angular/flex-layout": "^2.0.0-beta.7",
    "@angular/forms": "git://github.com/angular/forms-builds.git",
    "@angular/http": "git://github.com/angular/http-builds.git",
    "@angular/platform-browser": "git://github.com/angular/platform-browser-builds.git",
    "@angular/platform-browser-dynamic": "git://github.com/angular/platform-browser-dynamic-builds.git",
    "@angular/router": "git://github.com/angular/router-builds.git",

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}