Question

我刚刚将我的应用更新为Angular5。作为标准的商业期望，它应该主要适用于浏览器。

Angular 5在旧版浏览器中不起作用。我刚刚检查了browserstack它在较新版本的firefox中运行（51之后）。我应该怎么做才能使它至少运行到30版本。有许多用户使用旧版本的Firefox。

无论如何我们可以向他们展示至少错误信息，表明不支持firefox的版本？

Answer 1

我首先检查我的polyfills.ts文件并确保我已经启用并安装了旧浏览器的所有polfill。如果启用默认的polyfill不起作用，请参阅Angular文档的this页面

    /**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 *
 * This file is divided into 2 sections:
 *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 *      file.
 *
 * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
 * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
 * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
 *
 * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
 */

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
// import 'core-js/es6/symbol';
// import 'core-js/es6/object';
// import 'core-js/es6/function';
// import 'core-js/es6/parse-int';
// import 'core-js/es6/parse-float';
// import 'core-js/es6/number';
// import 'core-js/es6/math';
// import 'core-js/es6/string';
// import 'core-js/es6/date';
// import 'core-js/es6/array';
// import 'core-js/es6/regexp';
// import 'core-js/es6/map';
// import 'core-js/es6/weak-map';
// import 'core-js/es6/set';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js';  // Run `npm install --save classlist.js`.

/** IE10 and IE11 requires the following for the Reflect API. */
// import 'core-js/es6/reflect';


/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/reflect';


/**
 * Required to support Web Animations `@angular/platform-browser/animations`.
 * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
 **/
// import 'web-animations-js';  // Run `npm install --save web-animations-js`.



/***************************************************************************************************
 * Zone JS is required by Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.



/***************************************************************************************************
 * APPLICATION IMPORTS
 */

/**
 * Date, currency, decimal and percent pipes.
 * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
 */
// import 'intl';  // Run `npm install --save intl`.
/**
 * Need to import at least one locale-data with intl.
 */
// import 'intl/locale-data/jsonp/en';

如果设置您的polyfills并不允许您的应用支持您要定位的Firefox版本，那么我会在您的index.html中放置一个脚本标记，该标记使用window.navigator对象来检测浏览器。将其放在Typescript代码之外，即使Angular失败，也应允许浏览器检测逻辑执行。检测到浏览器后，您可以根据需要处理结果。以下是获取浏览器版本的代码：

<script>
   var browserVersion = navigator.appVersion;

   // Your logic here...
</script>

参考文献：

Angular5浏览器不支持消息

1 个答案: