Menu
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?
756
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.
139
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
