2016-06-21 24 views
7

Budowanie mojego projektu angular2 z JSPM w celu wydania: jspm bundle-sfx app dist/main.sfx.js. Wszystko w porządku, dopóki nie spróbuję załadować zbudowanej aplikacji w przeglądarce. Ten błąd pojawia się: `Błąd budowania animacji JSPM Angular2-rc2

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

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

Pełna dziennika jest następująca:

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)"…} 

Co może być przyczyną takiego błędu?

Odpowiedz

21

Miałem ten sam błąd, gdy mam pakiet angular2 app z pakietem sieci Web. Okazało się, że w moim przypadku narzekało, że document.body jest null. Dzieje się tak, gdy dodajesz swoje skrypty w sekcji head przed body i skrypt natychmiast próbuje działać z document.body.

Moja index.html było tak:

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

Więc została przeniesiona skrypty takie jak ten:

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

A teraz to działa dobrze.

+0

Dzięki. To działało dla mnie przy użyciu pakietu JSPM-sfx. Tam komunikat o błędzie był dość zagadkowy i opierałem swoją lokalizację znacznika skryptu na dokumencie szybkiego uruchamiania Angular2 docs ... –

+0

wielkie dzięki, nie mogłem zrozumieć, dlaczego ten błąd wyglądał losowo! – Gnujeremie