TypeError: Cannot read property 'animate' of null

[rizwanhussain-vteams]

I'm submitting a ... (check one with "x")

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

I'm using Chrome 51 and Angular 2.rc4 and following errors popup in the console when loading my angular app.

TypeError: Cannot read property 'animate' of null
at e.supportsWebAnimation (platform-browser.umd.js:2232)
at st (platform-browser.umd.js:2896)
at t._instantiate (core.umd.js:6370)
at t._instantiateProvider (core.umd.js:6311)
at t._new (core.umd.js:6300)
at t.getObjByKeyId (core.umd.js:5954)
at t._getByKeyDefault (core.umd.js:6480)
at t._getByKey (core.umd.js:6452)
at t._getByReflectiveDependency (core.umd.js:6442)
at t._instantiate (core.umd.js:6342)
at c (vendors.js:3)
at vendors.js:3
at t.invokeTask (vendors.js:3)
at Object.onInvokeTask (core.umd.js:9091)
at t.invokeTask (vendors.js:3)
at t.runTask (vendors.js:3)
at s (vendors.js:3)
at XMLHttpRequest.invoke (vendors.js:3)

Expected/desired behavior

This error should not show as i am not using animations explicitly and this does not happen on other browsers.

Reproduction of the problem
I do not have a plunker for this but i have a live site demo here. Visit this url in Chrom 51(or the latest) and you will see the error on first load. The second page load seems fine for some reason.

Here is the line causing error. Somehow, Chrome finds document.body to be null.

platform-browser.umd.js

BrowserDomAdapter.prototype.supportsWebAnimation = function () {
            return isFunction(document.body['animate']);
};

Also, if it helps, i'm using systemjs-builder to bundle app files

//Bundle auth module to a single script file
gulp.task('bundle_auth', ['bundle_vendors'], function() {
    var builder_auth = new Builder('', 'assets/js/dependencies/config/auth.system.js');
    return builder_auth
        .buildStatic('assets/app/auth/main.js', 'assets/dist/js/auth/bundle.js', { minify: true, sourceMaps: true })
        .then(function() {
            //console.log('Build complete for auth module');
        })
        .catch(function(err) {
            console.log(err);
        });
});

Here is my systemjs config

(function(global) {

    // map tells the System loader where to look for things
    var map = {
        'app' : 'assets/app/auth',
        '@angular': 'node_modules/@angular',
        'ng2-translate': 'node_modules/ng2-translate',
        'rxjs': 'node_modules/rxjs', // added this map section
        'primeng': 'node_modules/primeng',
        'angular2-recaptcha': 'node_modules/angular2-recaptcha'
    };

    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app': { main: 'assets/app/auth/main.js',  defaultExtension: 'js'},
        'rxjs': { defaultExtension: 'js' },
        'primeng': {defaultExtension: 'js'},
        'angular2-recaptcha': {defaultExtension: 'js'}
    };

    var packageNames = [
        'common',
        'compiler',
        'core',
        'http',
        'forms',
        'platform-browser',
        'platform-browser-dynamic',
        'router'
    ];

    // Individual files (~300 requests):
    function packIndex(pkgName) {
        packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
    }
    // Bundled (~40 requests):
    function packUmd(pkgName) {
        packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
    }

    // Most environments should use UMD; some (Karma) need the individual index files
    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;

    // Add package entries for angular packages
    packageNames.forEach(setPackageConfig);

    var config = {
        defaultJSExtensions: true,
        map: map,
        packages: packages
    };

    System.config(config);

})(this);

And here is the app bootstrap

import {bootstrap}    from '@angular/platform-browser-dynamic';
import {AppComponent} from './component/app.component';
import {HTTP_PROVIDERS} from '@angular/http';
import {HttpService} from '../common/service/http.service';
import {enableProdMode} from '@angular/core';
import {disableDeprecatedForms, provideForms} from '@angular/forms';
import {APP_ROUTER_PROVIDERS} from '../routes/auth.routes';
import {TRANSLATE_PROVIDERS, TranslateService, TranslatePipe, TranslateLoader, TranslateStaticLoader} from 'ng2-translate/ng2-translate';

enableProdMode();
bootstrap(AppComponent,[
    APP_ROUTER_PROVIDERS,
    HTTP_PROVIDERS,
    TRANSLATE_PROVIDERS,
    HttpService,
    disableDeprecatedForms(),
    provideForms()
]).catch(err => console.error(err));

What is the expected behavior?

This error should not show as i am not using animations explicitly and this does not happen on other browsers.

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

I don't know how to answer this.

Please tell us about your environment:

• Angular version: 2.0.0-rc.4
• Browser: Chrome 51
• Language: TypeScript 1.8

[vicb]

Adding a short plunker would help us handle the issue quicker

[rizwanhussain-vteams]

Sorry. It's hard to reproduce in a plunker. Also, it is a random issue. Once you refresh it goes away. But i found another issue #10191 which also points to the exact same problem.

[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.}