Angular 11应用在Tizen系统三星电视显示空白，如何完成适配？

1. tsconfig.json 修改 #

当前配置的编译目标为es2015，多数低版本Tizen系统内置浏览器内核仅支持到es5语法，需调整如下：

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es5", // 从es2015改为es5
    "module": "es2015", // 从es2020降级为es2015
    "lib": [
      "es5", // 从es2018改为es5
      "es2015.promise",
      "es2015.array",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true,
    "enableIvy": false // 低版本Tizen对Ivy编译引擎兼容性差，可关闭使用旧编译引擎
  }
}

2. polyfills.ts 补充 #

当前polyfill未覆盖Tizen系统缺失的基础API，需补充如下内容：

import 'zone.js/dist/zone';  // Included with Angular CLI.
// 原有core-js polyfill保留
import 'core-js/es/symbol';
import 'core-js/es/object';
import 'core-js/es/function';
import 'core-js/es/parse-int';
import 'core-js/es/parse-float';
import 'core-js/es/number';
import 'core-js/es/math';
import 'core-js/es/string';
import 'core-js/es/date';
import 'core-js/es/array';
import 'core-js/es/regexp';
import 'core-js/es/map';
import 'core-js/es/weak-map';
import 'core-js/es/set';
// 新增Tizen适配所需polyfill
import 'core-js/es/promise';
import 'core-js/es/reflect';
// 修复低版本Tizen classList API兼容问题
(function () {
  if (typeof window.Element === "undefined" || "classList" in document.documentElement) return;
  var prototype = Array.prototype,
      push = prototype.push,
      splice = prototype.splice,
      join = prototype.join;
  function DOMTokenList(el) {
    this.el = el;
    var classes = el.className.replace(/^\s+|\s+$/g,'').split(/\s+/);
    for (var i = 0; i < classes.length; i++) {
      push.call(this, classes[i]);
    }
  };
  DOMTokenList.prototype = {
    add: function(token) {
      if(this.contains(token)) return;
      push.call(this, token);
      this.el.className = this.toString();
    },
    contains: function(token) {
      return this.el.className.indexOf(token) != -1;
    },
    item: function(index) {
      return this[index] || null;
    },
    remove: function(token) {
      if (!this.contains(token)) return;
      for (var i = 0; i < this.length; i++) {
        if (this[i] == token) break;
      }
      splice.call(this, i, 1);
      this.el.className = this.toString();
    },
    toString: function() {
      return join.call(this, ' ');
    },
    toggle: function(token) {
      if (!this.contains(token)) {
        this.add(token);
      } else {
        this.remove(token);
      }
      return this.contains(token);
    }
  };
  window.DOMTokenList = DOMTokenList;
  function defineElementGetter (obj, prop, getter) {
    if (Object.defineProperty) {
      Object.defineProperty(obj, prop,{
        get : getter
      });
    } else {
      obj.__defineGetter__(prop, getter);
    }
  }
  defineElementGetter(Element.prototype, 'classList', function () {
    return new DOMTokenList(this);
  });
})();
// 屏蔽Tizen下不存在console对象导致的报错
if (!window.console) {
  window.console = {
    log: function() {},
    error: function() {},
    warn: function() {},
    info: function() {}
  } as any;
}

3. package.json 新增兼容配置 #

在package.json中添加browserslist字段，明确兼容范围：

{
  "name": "Angular",
  "version": "0.0.0",
  "browserslist": [
    "last 2 Chrome versions",
    "last 2 Firefox versions",
    "last 2 Safari versions",
    "ie 11",
    "last 2 Samsung versions",
    "Tizen >= 3"
  ],
  // 原有scripts、dependencies、devDependencies内容保留
}

同时调整build命令，添加es5兼容参数：

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build --prod --aot --buildOptimizer --output-hashing=all", // 修改build命令
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
}

4. 额外适配注意事项 #

• 检查项目中使用的第三方依赖：slick-carousel、Angular Material 11需禁用CSS变量特性，提前预编译主题为静态CSS，避免低版本Tizen不支持CSS自定义属性导致样式失效
• 入口index.html添加适配meta标签：

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  

• 避免使用ES2016+的原生API，如可选链、空值合并运算符等，若使用需通过babel额外转译
• 打包完成后需将dist目录内容放入Tizen Studio项目中，优先使用Tizen模拟器测试排查运行时错误

内容的提问来源于stack exchange，提问作者Gerald Hughes