Android 4.x 上的空白页加载 Angular 5 SPA

Question

我正在开发一个在所有浏览器上都能完美运行的 SPA，除了 Android 原生低于 4.4 Kit Kat（不包括在内），它显示一个空白页面。我取消了 polyfills.ts (Angular CLI) 的 polyfills 的注释，尝试安装 npm core-js 并将 import 'core-js/es7'; 和 import 'core-js/es6'; 添加到 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
 */

import 'core-js/es6';
import 'core-js/es7';

/** 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 default for Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.



/***************************************************************************************************
 * APPLICATION IMPORTS
 */
import 'web-animations-js';

我无法让它在任何低于 4.4 Kit Kat 的 android 设备上运行。我还设置了 angular-cli.json 只是为了测试我是否可以让它开始工作：

  "scripts": [ 
    "../node_modules/core-js/client/shim.min.js",
    "../node_modules/core-js/client/core.min.js"
  ],

似乎没有任何效果。我怎么知道 Android 4.3 WebView 及以下版本不支持哪个组件？

提前致谢

package.json 中的依赖项：

"dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0",
    "@ngx-translate/core": "^9.1.1",
    "@ngx-translate/http-loader": "^2.0.1",
    "@types/lodash": "^4.14.104",
    "angular-font-awesome": "^3.1.2",
    "bootstrap": "^4.0.0-beta.2",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.5.3",
    "font-awesome": "^4.7.0",
    "grunt": "^1.0.2",
    "lodash": "^4.17.5",
    "rxjs": "^5.5.6",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.19"
  },

Answer 1

在对应Android 4.3及以下的WebView中，我们需要将polyfills添加到angular cli scripts标签。由于某种原因我无法理解，polyfills.ts 文件没有添加相应的。

我意识到这改变了 WebView 的 Android 代码：

1. 您需要设置一个新的 ChromeClient

2. 在自定义 ChromeClient 类上设置此代码：

   public void onConsoleMessage(String message, int lineNumber, String sourceID) { Log.d("MyApplication", message + " -- 从行" + lineNumber + " of " +源ID）； }

3. 现在，您在 Android Studio 中的运行控制台将打印控制台警告、错误和其他信息。在那里你可以知道你需要哪些 polyfill。

polyfill 的更正

首先将文件添加到 angular-cli.json：

  "scripts": [ 
    "../node_modules/core-js/client/shim.min.js",
    "../node_modules/zone.js/dist/zone.js",
    "../node_modules/reflect-metadata/Reflect.js",
    "../node_modules/systemjs/dist/system.src.js",
    "../node_modules/web-animations-js/web-animations.min.js",
    "../node_modules/web-animations-js/web-animations-next.min.js",
    "../node_modules/classlist.js/classList.min.js"
  ],

其次你必须安装库：

• npm install --save core-js
• npm install --save systemjs
• npm install --save web-animations
• npm install --save classlist.js

第三：

• 取消注释 polyfills.ts 文件中的所有 polyfill。
• 地址：import 'core-js/es6/promise';

这就是您可以使用 polyfill 支持 android 4.3 及以下 webviews 的方式。

重要提示：虽然我已经为动画导入了 WebView polyfill，但 Android 无法管理动画生成的 css，所以如果你想要一个正确的行为，最好禁用这个动画。东西坏了。