2016-06-21 12 views
7

Quindi, creare il mio progetto angular2 con JSPM per il rilascio: jspm bundle-sfx app dist/main.sfx.js. Tutto bene, finché non provo a caricare l'app costruita nel browser. Questo è l'errore che ottengo: `JSPM Angular2-rc2 build animate error

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

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

log completo è il seguente:

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

che cosa potrebbe causare un errore del genere?

risposta

21

Ho avuto lo stesso errore quando ho associato l'app angular2 con il webpack. Si è scoperto che nel mio caso si lamentava che document.body è null. Ciò accade quando includi i tuoi script nella sezione body prima della sezione body e nello script che tenta immediatamente di operare con document.body.

mio index.html è stato così:

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

script Così, ho spostato come questo:

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

E ora funziona benissimo.

+0

Grazie. Questo ha funzionato per me usando JSPM bundle-sfx. Il messaggio di errore era piuttosto criptico e stavo basando la mia posizione sul tag script sull'esempio di avvio rapido dei documenti Angular2 ... –

+0

grazie mille, non potevo capire perché questo errore sembrava casuale! – Gnujeremie