JSPM Angular2-rc2 构建动画错误

Question

因此，使用 JSPM 构建我的 angular2 项目以供发布：jspm bundle-sfx app dist/main.sfx.js。一切都很好，直到我尝试在浏览器中加载构建的应用程序。这是我得到的错误：`

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

什么会导致这样的错误？

Answer 1

当我将 angular2 应用程序与 webpack 捆绑在一起时，我遇到了同样的错误。事实证明，在我的案例中，它抱怨 document.body 是 null。当您将脚本包含在 body 部分之前的 head 中并且脚本立即尝试使用 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>

现在一切正常。

JSPM Angular2-rc2 构建动画错误

JSPM Angular2-rc2 build animate error

jspm

angular