安卓内置浏览器以及UC浏览器打开angular4 项目空白问题的解决

作者: wxfeng 分类: web前端 发布时间: 2018-11-10 00:00

问题描述:

将ng build –prod –aot 打包构建生成的代码部署在web服务器,在电脑端通过浏览器(谷歌,火狐)访问项目,数据以及页面可正常加载。手机端,在安卓设备上测试QQ浏览器,在苹果手机上测试safari也可正常访问,数据加载也正常。在安卓手机上使用UC浏览器以及安卓手机自带的浏览器访问项目,会出现页面空白的问题。

原因:

Angular2,Angular4是面向未来的科技,要求浏览器支持ES6+,而UC浏览器以及大部分安卓手机自带的浏览器暂不支持ES6+,因此需要加一些填充库来抹平当前浏览器与ES6的差异。在使用angular-cli构建项目(ng build)时,默认情况下,angular-cli会引入一些支持ES5浏览器的填充库,但是只有很少一部分,在自己实际构建项目时,需要根据自己的项目,选择合适填充库来保证项目的兼容性。

解决方案:

知道原因之后,解决起来就有道可循了。由于是使用angular-cli来构建项目,查看angular-cli的配置文件“.angular-cli.json”,在apps条目下可发现有如下配置信息:

 "polyfills": "polyfills.ts",

这个polyfills.ts就是配置填充库的地方。打开polyfills.ts,文件内容如下:

/**
 * 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`.
/** Evergreen browsers require these. **/
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
/**
 * Required to support Web Animations `@angular/animation`.
 * 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.ts,保存,重新执行ng build –prod –aot构建项目,dist文件夹下的js文件大小发生变化,证明配置生效。再次通过UC浏览器以及安卓系统自带浏览器访问,页面正常加载。

done!

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注