JSPM Angular2-rc2 빌드 애니메이션 오류

그래서, angle2 프로젝트를 JSPM과 함께 배포하려면 jspm bundle-sfx app dist/main.sfx.js을 빌드하십시오. 브라우저에 내장 된 응용 프로그램을로드하려고 할 때까지 괜찮습니다. 이 오류는 내가 얻을 수있다 :`다음과 같이JSPM Angular2-rc2 빌드 애니메이션 오류

EXCEPTION: Error during instantiation of AnimationDriver! (ViewUtils -> RootRenderer -> DomRootRenderer -> AnimationDriver 

ORIGINAL EXCEPTION: TypeError: Cannot read property 'animate' of null

전체 로그는 다음과 같습니다

The key "target-densitydpi" is not supported. 
EXCEPTION: Error during instantiation of AnimationDriver! (ViewUtils -> RootRenderer -> DomRootRenderer -> AnimationDriver). 
EXCEPTION: Error during instantiation of AnimationDriver! (ViewUtils -> RootRenderer -> DomRootRenderer -> AnimationDriver). 
ORIGINAL EXCEPTION: TypeError: Cannot read property 'animate' of null 
ORIGINAL STACKTRACE: 
TypeError: Cannot read property 'animate' of null 
    at BrowserDomAdapter.supportsWebAnimation (browser_adapter.js:507) 
    at _resolveDefaultAnimationDriver (browser.js:95) 
    at ReflectiveInjector_._instantiate (reflective_injector.js:468) 
    at ReflectiveInjector_._instantiateProvider (reflective_injector.js:410) 
    at ReflectiveInjector_._new (reflective_injector.js:399) 
    at ReflectiveInjectorDynamicStrategy.getObjByKeyId (reflective_injector.js:275) 
    at ReflectiveInjector_._getByKeyDefault (reflective_injector.js:571) 
    at ReflectiveInjector_._getByKey (reflective_injector.js:548) 
    at ReflectiveInjector_._getByReflectiveDependency (reflective_injector.js:539) 
    at ReflectiveInjector_._instantiate (reflective_injector.js:441) 
EXCEPTION: Error during instantiation of AnimationDriver! (ViewUtils -> RootRenderer -> DomRootRenderer -> AnimationDriver). 
EXCEPTION: Error during instantiation of AnimationDriver! (ViewUtils -> RootRenderer -> DomRootRenderer -> AnimationDriver). 
ORIGINAL EXCEPTION: TypeError: Cannot read property 'animate' of null 
ORIGINAL STACKTRACE: 
TypeError: Cannot read property 'animate' of null 
    at BrowserDomAdapter.supportsWebAnimation (browser_adapter.js:507) 
    at _resolveDefaultAnimationDriver (browser.js:95) 
    at ReflectiveInjector_._instantiate (reflective_injector.js:468) 
    at ReflectiveInjector_._instantiateProvider (reflective_injector.js:410) 
    at ReflectiveInjector_._new (reflective_injector.js:399) 
    at ReflectiveInjectorDynamicStrategy.getObjByKeyId (reflective_injector.js:275) 
    at ReflectiveInjector_._getByKeyDefault (reflective_injector.js:571) 
    at ReflectiveInjector_._getByKey (reflective_injector.js:548) 
    at ReflectiveInjector_._getByReflectiveDependency (reflective_injector.js:539) 
    at ReflectiveInjector_._instantiate (reflective_injector.js:441) 
InstantiationError {_wrapperMessage: "DI Exception", _originalException: TypeError: Cannot read property 'animate' of null 
    at BrowserDomAdapter.supportsWebAnimation (htt…, _originalStack: "TypeError: Cannot read property 'animate' of null↵… (https://randohinn.com/w2w/main.sfx.js:47702:34)", _context: null, _wrapperStack: "Error: DI Exception↵ at InstantiationError.Wrap… (https://randohinn.com/w2w/main.sfx.js:47702:34)"…}

는 오류가 무엇을 일으킬 수 있을까?

출처

2016-06-21 Rando Hinn

webpack으로 angular2 앱을 묶었을 때 동일한 오류가 발생했습니다. 제 경우에는 document.body이 null이라는 불평이있었습니다. 이것은 에 스크립트를 포함하고 섹션 전에 스크립트가 바로 document.body으로 작동하려고 할 때 발생합니다.

내 index.html을이 같았다 :이 같은

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

    <title>Legal Review</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="build/thirdparty.js"></script> 
    <script src="build/app.js"></script> 
</head> 

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

</html>

그래서, 이동 한 스크립트 :

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

    <title>Legal Review</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-component> 
     Loading... 
    </app-component> 

    <script src="build/thirdparty.js"></script> 
    <script src="build/app.js"></script> 
</body> 

</html>

그리고 지금은 잘 작동합니다.

출처

2016-06-21 13:20:07 megaboich

감사합니다. 이것은 JSPM 번들 -sfx를 사용하여 저에게 도움이되었습니다. 오류 메시지가 매우 신빙성이 있었고 Angular2 문서의 퀵 스타트 예제에서 스크립트 태그 위치를 기반으로했습니다 ... –

덕분에이 오류가 무작위로 보였습니다. – Gnujeremie

JSPM Angular2-rc2 빌드 애니메이션 오류

답변

관련 문제