JSPM Angular2-rc2 build animate error

Question

So, building my angular2 project with JSPM for release: jspm bundle-sfx app dist/main.sfx.js. All fine, until I try to load the built app up in the browser. This is the error I get:`

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

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

Full log is as follows:

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

What could cause such an error?

score 21 · Accepted Answer · edited Jul 16 '16 at 16:11

I had the same error when I have bundled angular2 app with webpack. It turned out that in my case it was complaining that document.body is null. This happens when you include your scripts in head before body section and script immediately trying to operate with document.body.

My index.html was like this:

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

So, I've moved scripts like this:

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

And now it works fine.

Thanks. This worked for me using JSPM bundle-sfx. There error message was pretty cryptic and I was basing my script tag location on the Angular2 docs quick-start example... — Patrick Michalina, Jun 21 '16 at 19:15
thanks a lot, I could not understant why this error looked random! — Gnujeremie, Jul 07 '16 at 14:51

JSPM Angular2-rc2 build animate error

1 Answers1