Angular 2 TypeError : null의 'animate'속성을 읽을 수 없습니다.

Question

각도 응용 프로그램을로드 할 때 Chrome 51 및 각도 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 인 것 같습니다.

는

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

이 문제는 발생 : 나는, bundline 각 구성 요소에 대한 systemjs 빌더를 사용하여 너무 좋아하고

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

: 필요한 경우 여기

//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 설정입니다 크롬.

편집 여기

는 각 부트 스트랩 파일 : 나는 당신이 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>