Angular 11 app not working on Tizen (Samsung TV)

Question

I have a simple Angular 11 app. The works on all modern browser Chrome/Firefox/Safari/IE. But on my Samsung TV, it renders an empty page.

What do I have to do to make it compatible?

tsconfig

/* 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": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

polyfills.ts

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

package.json

{
  "name": "Angular",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~11.0.5",
    "@angular/cdk": "^11.2.13",
    "@angular/common": "~11.0.5",
    "@angular/compiler": "~11.0.5",
    "@angular/core": "~11.0.5",
    "@angular/forms": "~11.0.5",
    "@angular/material": "^11.2.13",
    "@angular/platform-browser": "~11.0.5",
    "@angular/platform-browser-dynamic": "~11.0.5",
    "@angular/router": "~11.0.5",
    "@fortawesome/angular-fontawesome": "^0.9.0",
    "@fortawesome/fontawesome-free": "^5.15.4",
    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@fortawesome/free-brands-svg-icons": "^5.15.4",
    "@fortawesome/free-regular-svg-icons": "^5.15.4",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@types/lodash": "^4.14.168",
    "angular-gauge-chart": "^0.7.2",
    "jquery": "^3.6.0",
    "lodash": "^4.17.21",
    "ngx-slick-carousel": "^0.5.1",
    "rxjs": "~6.6.0",
    "slick-carousel": "^1.8.1",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1100.5",
    "@angular/cli": "~11.0.5",
    "@angular/compiler-cli": "~11.0.5",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  }
}

@jug this is a part of the solution: https://stackoverflow.com/a/69601489/3264998 for the other part I've deployed the app on a tv, and make small changes until I've got the desired result. for example in my case the css library that i was using 'tailwind' was not working, so I've come up with another solution — Gerald Hughes, Nov 05 '21 at 13:11
Do you have http requests ? If yes can you show me an exemple of your work plz ? https://stackoverflow.com/questions/70152522/http-get-with-angular-tizen-on-device — jug, Nov 30 '21 at 08:28
@jug yes, I do have http requests, it seems that you can't read the url from a configuration file, you need to hardcode the url. Also I advise you to use a exception handler in order to debug — Gerald Hughes, Dec 07 '21 at 10:41
Any updates about your issue please, as we face the same issue? — Hossam EL-Kashef, Jan 06 '22 at 03:07
Can't you just set the `"target": "es5"` or `"target": "es3"`? — Pieterjan, Jan 12 '23 at 18:59

score 1 · Answer 1 · answered Jan 12 '23 at 17:22

Tizen, the default Samsung TV browser, is very limited in rendering websites. The same occurs on native browsers of other TV brands.

The solution for having your Angular website loading on that kind of limited browser, you need to use Server Side Rendering instead of Client Side Rendering.

Install Angular Universal Package

ng add @nguniversal/express-engine
Change your build command to:

npm install && npm run build:ssr
Change your start command to:

npm run serve:ssr

The application will run at port 4000. A Node.js backend server will be required to deploy your website. It means you won’t be able to deploy as a Client Side app, as you need a Node.js environment to deploy your application into it like it was a backend application.

For more details, refer to the official documentation: Server-side rendering (SSR) with Angular Universal

I have used this solution in an open-source project available on this repository at my GitHub. CIRCUIT-ON worked well on a Samsung TV model UN32M4500BF, using Tizen Browser version 2.1 (2014), as well as on other models of TVs.

Angular 11 app not working on Tizen (Samsung TV)

1 Answers1