title: Angular 2 TypeError: Cannot read property 'animate' of null
body: <p>I'm using Chrome 51 and Angular 2.rc4 and following errors popup in the console when loading my angular app.</p>
  
  <pre><code>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)
  </code></pre>
  
  <p>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 <code>body</code> of the document seems to be <code>null</code> in file <code>platform-browser.umd.js</code>.</p>
  
  <pre><code>BrowserDomAdapter.prototype.supportsWebAnimation = function () {
          return isFunction(document.body['animate']);
  };
  </code></pre>
  
  <p>I am using systemjs-builder for bundline the angular components, like so:</p>
  
  <pre><code>//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);
      });
  });
  </code></pre>
  
  <p>And here is my <code>systemjs</code> config, if needed:</p>
  
  <pre><code>(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);
  </code></pre>
  
  <p>This issue only happens in chrome.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Here is the angular bootstrap file:</p>
  
  <pre><code>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 =&gt; console.error(err));
  </code></pre>