Angular 2 TypeError：ヌルのプロパティ 'animate'を読み取ることができません

Question

角度アプリを読み込むときにChrome 51とAngular 2.rc4を使用していて、コンソールにエラーポップアップが表示されます。

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) 

私はもう一度それをリフレッシュすると、それは消えて、アプリケーションが正常に読み込まれます。私はそれをもう少し掘り下げると、文書のbodyがnullのファイルplatform-browser.umd.jsのように見える次の問題のあるコードを見つけました。

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

ので、同様に、私は、bundline角度成分のためsystemjs-ビルダーを使用しています：必要に応じて

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

そしてここでは、私の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); 

この問題は、のみ発生クロム中。

EDITここ

は角ブートストラップファイルである：私はあなたがindex.htmlをでヘッド部の内側にあなたのバンドルのjsファイルが含まれていますがにそれらを転送するべきだと思い

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

あなたのアプリの下に身体部分。

私はwebpackに私のアプリケーションを移した後、私はまったく同じ問題を抱えていた。

例えば、

<!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>

私はあなたの角度のブートストラップファイルを追加することができ、この

<!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>