Angular 2 TypeError: Cannot read property 'animate' of null

Question

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)

If i refresh it again it disappears and the app loads fine. When i dig into it a bit more, i found out the following problematic code where the body of the document seems to be null in file platform-browser.umd.js.

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

I am using systemjs-builder for bundline the angular components, like so:

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

And here is my systemjs config, if needed:

(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);

This issue only happens in chrome.

EDIT

Here is the angular bootstrap file:

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

Answer 1

I think you include your bundled js files inside of the head section in the index.html but you should transfer those to the body part under your app.

For being more clear after i transfered my application to webpack i had exactly same issue.

For example,

<!DOCTYPE html>
<html>
<head>
    <base href="">

    <title>Test</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <script src="prod/vendor.js"></script>
    <script src="prod/app.js"></script>
</head>

<body>
    <app-one>
        Loading...
    </app-one>
</body>

</html>

I transferred scripts like this

<!DOCTYPE html>
<html>
<head>
    <base href="">

    <title>Test</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>

<body>
    <app-one>
        Loading...
    </app-one>
  
    <script src="prod/vendor.js"></script>
    <script src="prod/app.js"></script>
</body>

</html>