Angular2显示此错误:TypeError:Object没有方法'requestAnimationFrame'

时间:2016-03-29 15:47:11

标签: cordova angular

我正在构建一个带有phonegap + angular2的应用程序以及旧浏览器(例如Samsung S3上的股票浏览器)我收到此错误:

[phonegap] [console.error] ORIGINAL EXCEPTION: TypeError: Object [object DOMWindow] has no method 'requestAnimationFrame'
[phonegap] [console.error] ORIGINAL STACKTRACE:
[phonegap] [console.error] TypeError: Object [object DOMWindow] has no method 'requestAnimationFrame'
[phonegap]     at BrowserDomAdapter.requestAnimationFrame (http://10.10.255.247:3000/libs/angular/2.0.0-beta.12/angular2-all.umd.js:30516:94)
[phonegap]     at RafQueue._raf (http://10.10.255.247:3000/libs/angular/2.0.0-beta.12/angular2-all.umd.js:30048:32)
[phonegap]     at new RafQueue (http://10.10.255.247:3000/libs/angular/2.0.0-beta.12/angular2-all.umd.js:30043:15)
[phonegap]     at BrowserDetails.raf (http://10.10.255.247:3000/libs/angular/2.0.0-beta.12/angular2-all.umd.js:30029:22)
[phonegap]     at BrowserDetails.doesElapsedTimeIncludesDelay (http://10.10.255.247:3000/libs/angular/2.0.0-beta.12/angular2-all.umd.js:30018:15)
[phonegap]     at new BrowserDetails (http://10.10.255.247:3000/libs/angular/2.0.0-beta.12/angular2-all.umd.js:30007:15)
[phonegap]     at http://10.10.255.247:3000/libs/angular/2.0.0-beta.12/angular2-all.umd.js:4871:46
[phonegap]     at Injector._instantiate (http://10.10.255.247:3000/libs/angular/2.0.0-beta.12/angular2-all.umd.js:3359:28)
[phonegap]     at Injector._instantiateProvider (http://10.10.255.247:3000/libs/angular/2.0.0-beta.12/angular2-all.umd.js:3300:26)
[phonegap]     at Injector._new (http://10.10.255.247:3000/libs/angular/2.0.0-beta.12/angular2-all.umd.js:3289:22)

Html5test.com为浏览器提供以下分数:228 points 并且不支持window.requestAnimationFrame

我加入了这篇文章:

<script src="libs/es6-shim/es6-shim.min.js"></script>
<script src="libs/angular/2.0.0-beta.12/angular2-polyfills.js"></script>
<script src="libs/angular/2.0.0-beta.12/Rx.umd.js"></script>
<script src="libs/angular/2.0.0-beta.12/angular2-all.umd.js"></script>

我不使用任何动画。如果能够在旧浏览器中运行angular2,我该怎么办?

2 个答案:

答案 0 :(得分:3)

我有很多polyfills,也许有些我不需要,但在其中我发现了这个功能:

//RequestAnimationFrame (IE9, Android 4.1, 4.2, 4.3)
/*! @author Paul Irish */
/*! @source https://gist.github.com/paulirish/1579671 */
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel

// MIT license

(function() {
    var lastTime = 0;

    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = Date.now();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); },
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };

    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());

我不记得我最初在哪里找到了这个片段,但是我需要这个版本用于IE的旧版本。它也适合你。

答案 1 :(得分:1)

我找到的解决方案是加载js:https://npmcdn.com/angular2@2.0.0-beta.12/es6/dev/src/testing/shims_for_IE.js它不仅仅适用于ie。对于旧版Android浏览器。

此文件可在5分钟的示例中找到。