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

Question

我正在开发一款适用于所有浏览器的SPA，除了4.4 Kit Kat（不包括在内）以下显示空白页面的Android原生。我没有注释polyfills.ts（Angular CLI）的polyfills，试图安装npm core-jsand添加import 'core-js/es7';and 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

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

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

1. 您需要设置新的ChromeClient
2. 在自定义ChromeClient类上设置此代码： public void onConsoleMessage（String message，int lineNumber，String sourceID）{Log.d（“MyApplication”，message +“ - from line”+ lineNumber +“of”+ sourceID）; }
3. 现在Android Studio中的Run控制台将打印控制台警告，错误和其他内容。在那里你可以知道你需要哪些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，所以如果你想要一个正确的行为，你最好禁用这个动画。事情破裂了。