Writing a Tizen watch application with Angular 6

Step 1: Creating an Angular project

cd ~/git/
~/git/$ ng new angularTizenSample
~/git/$ cd angularTizenSample
~/git/$ ng serve

Step 2: Creating a Tizen Web Project

~/git/angularTizenSample/$ tizen create web-project -p mobile-2.3.1 -t WebBasicApplication -n angularTizenSample
~/git/angularTizenSample/angularTizenSample/$ cd angularTizenSample
~/git/angularTizenSample/angularTizenSample/$ tizen build-web
~/git/angularTizenSample/angularTizenSample/$ tizen package -t wgt -- .buildResult/
~/git/angularTizenSample/angularTizenSample/$ sdb install .buildResult/angularTizenSample.wgt
~/git/angularTizenSample/angularTizenSample/$ sdb shell "wrt-launcher '-s Bsl3EwnDc9.angularTizenSample'"
The basic project on the Tizen Emulator

Bridging the Gap

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';
<div style="text-align:center">
<img width="360" height="360" alt="Angular Logo" (click)="changeImage()" src="{{img}}">
</div>
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'angularTizenSample';
angular = 'assets/angular.png';
tizen = 'assets/tizen.png';
img = this.angular;

changeImage() {
if (this.img === this.angular) {
this.img = this.tizen;
} else {
this.img = this.angular;
}
}
}

Updating the Build Files

{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"angularTizenSample": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"targets": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/angularTizenSample",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets",
{ "glob": "*", "input": "tizen/", "output": "/" }
],
"styles": [
"src/styles.css"
],
.....
{
"name": "angular-tizen-sample",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"tizen": "npm run build && npm run tizenPackage", "tizenPackage": "cd dist/angularTizenSample && tizen build-web && tizen package -t wgt -- .buildResult/",
"tizenRun": "cd dist/angularTizenSample && sdb install .buildResult/angularTizenSample.wgt && sdb shell \"wrt-launcher '-s Bsl3EwnDc9.angularTizenSample'\"
"
},
"private": true,
Angular on the emulator

Whats Next?

Notes

  • Debugging? You can use the Tizen Studio to start the project and even debug it from there, but as I said, it’s a bit flaky. The IDE freezing and various errors are abound. You can also attach to the Web Inspector of the version that was started from the command line.
  • Routing doesn’t work — everything needs to be in index.html.
  • Performance is adequate, on par with regular JS apps.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store