---
# System prepended metadata

title: "All material for Install Angular 7,10 for KTB \U0001F4E6"

---

# All material for Install Angular 7,10 for KTB 📦

## Git Project
Dev Enviorment : - https://gitlab.dev.com/ktb/frontend

> แก้ไข host เปิดไฟล์ที่ path ต่อไปนี้
```
path : C:\Windows\System32\drivers\etc
file : hosts     (แก้ไฟล์นี้)
```
> เปิดด้วย run as administrator แล้วเพิ่ม
```
##KTB
#172.13.33.4 gitlab.dev.com
172.13.33.6 gitlab.dev.com
```
> and save แล้วทดสอบเข้า https://gitlab.dev.com/
 
ขึ้นตอน Gen ssh key (ถ้ามีแล้วให้ข้าม)
```
ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
```

## Start Dev Enviorment
หลังจาก git clone 
```
cd [เข้าไปที่ project]

ng serve
```

## Disabled SSL CERTIFICATE CHECK
ใช้คำสั่งต่อไปนี้
```
git config --global http.sslVerify false
```
## เปลี่ยน Remote 
```
git remote add origin git@gitlab.dev.com:frontend/fas.git
```
## แก้ปัญหา Remote ชื่อซ้ำแต่ คนละ Server
ไปที่ Folder .ssh ใช้ editor เปิดไฟล์ know_hosts

![](https://i.imgur.com/Qodmfv2.png)

ลบ gitlab.dev.com, 172.13.33.4 ที่เป็น ip เดิมออก

![](https://i.imgur.com/6WY3fc5.png)

แล้วทดลอง ใช้คำสั่งของพวก git ใหม่ว่ายังติด error หรือไม่ 


## Design

### invisionapp :
[Preview - Optimist](https://projects.invisionapp.com/share/V3VRWLUNF52#/screens/403525013)
[[Project KTB] - Optimist](https://projects.invisionapp.com/d/main/default/#/projects/prototypes/19297596) จะต้อง login ด้วย
> User : inet.ktb.design@gmail.com
> Pass : inet@ktb
> ***Login ครั้งแรกเข้าเมนู Solo


[Preview - PPS](https://projects.invisionapp.com/d/main#/projects/prototypes/19297795)
[[Project KTB] - PPS](https://projects.invisionapp.com/d/main#/projects/prototypes/19297795) จะต้อง login ด้วย

> User : inet.ktb.design@gmail.com
> Pass : inet@ktb
> ***Login ครั้งแรกเข้าเมนู Solo

### Zeplin(ไม่ใช้แล้ว) :
> User : inet.ktb.design@gmail.com
> Pass : inet@ktb
> >
> Download
> https://support.zeplin.io/en/articles/244698-downloading-mac-and-windows-apps


## Set Evniorment Postman
 ### เพื่อใช้งาน api

1) ไปที่ Manage Enviorments (ที่เป็นรูปเฟือง ![](https://i.imgur.com/TE4vbIO.png))
2) กดที่ปุ่ม Add ![](https://i.imgur.com/lgFf2eZ.png)
3) ทำการเซ็ตดังรูป
 ![](https://i.imgur.com/Lw4k0ot.png)
 


## Prepare Enviorment 🏋🏻‍♂️

- node (npm) https://nodejs.org/dist/v12.14.1/node-v12.14.1-x64.msi  (stable)
- ng cli ตามขั้นตอนที่ 1.

## Installation 🦾

1) ลง angular/cli (angular 7)

```install
npm install -g @angular/cli@7.3.8
ng --version

```

> กรณีที่ลงเวอร์ชั่นล่าสุดไปแล้ว (Downgrade) 

```
ng --version
npm uninstall -g @angular/cli
npm cache clean --force

npm install -g @angular/cli@7.3.8
ng --version
```

2. สร้างโปรเจค (*กรณีไม่ได้สร้างโปรเจคใหม่ให้ข้ามขึ้นตอนนี้)
```
ng new <project-name>
    
example: ng new my-app

in cli select >>
>> Would you like to add Angular routing? Yes
>> Which stylesheet format would you like to use? SCSS
```

3. serve project dev enviorment เพื่อทดสอบ
```
cd <project-name>

example : cd my-app
```

```
ng serve --open
```

4) ลง Bootstrap CSS framwork
```
npm install ngx-bootstrap bootstrap --save
```
กรณี add เฉพาะ bootstrap
```
npm install bootstrap --save
```
5) ลง angular material
```
ng add @angular/material

in cli select >>
>> Choose a prebuilt theme name, or "custom" for a custom theme?  Deep Purple/Amber  [ Preview: https://material.angular.i
o?theme=deeppurple-amber ]
>> Set up HammerJS for gesture recognition? Yes
>> Set up browser animations for Angular Material? Yes
```
REF:
[NGX-Bootstrap](https://valor-software.com/ngx-bootstrap/#/)
, [Material Angular](https://material.angular.io/)
, [Semantic-UI](https://semantic-ui.com/)
, [Bootstrap](https://getbootstrap.com/docs/4.4/getting-started/introduction/)
, [Note for Install Bootstrap](https://github.com/valor-software/ngx-bootstrap/blob/development/docs/getting-started/bootstrap.md)

> เรียกใช้งาน style bootstrap โดยไปที่ angular.json แล้วเพิ่ม path : node_modules/bootstrap/dist/css/bootstrap.min.css
```  
"styles": [ 
            "src/styles.css",   
            "node_modules/bootstrap/dist/css/bootstrap.min.css"
          ] 
```

## ขึ้นตอนการ Install NgRx (state management)
1) ลงตัว gen config
```
npm install @ngrx/schematics --save-dev
ng config cli.defaultCollection @ngrx/schematics

npm install @ngrx/store-devtools --save
npm install @ngrx/store --save
npm install @ngrx/entity --save
npm install @ngrx/effects --save
```
2) เริ่มรันโครงสร้าง store
```
ng g store store --module=app.module.ts --root=true --statePath=store --stateInterface=AppState

**** คำอธิบาย
ng g store store -> สร้าง store
--module=app.module.ts -> อ้างอิงไปที่ module ไหน ซึ่งในที่นี้เป็น app.module.ts 
--root=true -> เนื่องจากเราต้องการทำเป็น state เป็น global ที่ app.module ดังนั้นจะต้องเซ็ตเป็น root=true
--statePath=store -> src/app/store สร้างไปที่ path ไหน
--stateInterface=AppState -> ชื่อ interface เริ่มต้น ใช้ชื่ออะไรก็ได้
```
3) สร้าง action
```
 ng g action store/actions/config --api=true --skipTests=true 
```
4) สร้าง reducer
```
ng g reducer store/reducers/config --api=true --skipTests=true --reducers=../index.ts
```


## สร้าง Component 
```
ng g c /customer/yourcomponent
ng g m /customer/yourcomponent --module app --flat --routing
```

## ขั้นตอนการ Build และ Deploy บนระบบงาน k8s
![](https://i.imgur.com/cZ3XTx5.png)

 build image > harbor > deploy
1) สร้าง Folder ใหม่เพื่อเตรียม environment
2) เข้าไปที่ Folder Project แล้ว build file ที่จะเตรียมขึ้น
```
ng build --prod
หรือ
npm run build
```
จะได้โฟล์เดอร์ /dist แล้ว copy โฟล์เดอร์นี้ไปยัง Folder ที่เตรียมไว้ 

3) นำ /dist ไปขึ้น docker โดยทำการเตรียมไฟล์ดังต่อไปนี้

> Dockerfile
```
FROM nginx:1.14.0-alpine
COPY dist/ /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
VOLUME /usr/share/nginx/html
VOLUME /etc/nginx/conf.d/default.con

CMD ["/bin/sh",  "-c",  "envsubst < /usr/share/nginx/html/assets/env.template.js > /usr/share/nginx/html/assets/env.js && exec nginx -g 'daemon off;'"]

```
> nginx.conf
```
server {
    listen 8080;
    access_log on;
    error_log on;
    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }
}
```
4) ทำการ build docker images (โดยดู เลข version จาก harbor จากขั้นตอนที่ 6)
````
# fas
docker build --no-cache -f Dockerfile -t fas-web:0.0.x .
*** fas-web:0.0.x คือให้ทำการเปลี่ยนเลขเวอร์ชั่นตลอดทุกการ build 
เช่น fas-web:0.0.1 , fas-web:0.0.2 , fas-web:0.0.3  

# pps 
docker build --no-cache -f Dockerfile -t pps-web:0.0.x .

# webcl
docker build --no-cache -f Dockerfile -t webcl-web:0.0.x .

# sds
docker build --no-cache -f Dockerfile -t sds-web:0.0.x .
````
5) ทำการ tag version ที่จะขึ้น harbor
```
# fas
docker tag fas-web:0.0.x harbor.dev.com:8444/frontend-fas/fas-web:0.0.x

(pg_fas)
docker tag fas-web:0.0.x harbor.dev.com:8444/fas-pg/web:0.0.x

# pps 
docker tag pps-web:0.0.x harbor.dev.com:8444/frontend-pps/pps-web:0.0.x

# webcl
docker tag webcl-web:0.0.x harbor.dev.com:8444/webcl/webcl-web:0.0.x

# sds
docker tag sds-web:0.0.x harbor.dev.com:8444/sds-db2/sds-web:0.0.x
```
6) login docker harbor (ถ้า login แล้วให้ข้าม)
```
docker login 
```
>  username : frontend
>  password : frontend@KTB12345

7) นำ docker images ขึ้น harbor (https://harbor.dev.com:8444/)
```
# fas
docker push harbor.dev.com:8444/frontend-fas/fas-web:0.0.x

(pg_fas)
docker push harbor.dev.com:8444/fas-pg/web:0.0.x

# pps 
docker push harbor.dev.com:8444/frontend-pps/pps-web:0.0.x

# webcl
docker push harbor.dev.com:8444/webcl/webcl-web:0.0.1

# sds
docker push harbor.dev.com:8444/sds-db2/sds-web:0.0.1
```
8) เตรียมไฟล์ pods และ svc เพื่อไป Deploy ที่ k8s (ตัวอย่างระบบ fas)(ถ้าเตรียมเสร็จแล้วให้ข้ามไปที่ขึ้นตอนที่ 9. ) 

> fas-web-pod.yml
```
apiVersion: apps/v1
kind: Deployment
metadata:
  name: fas-web
  labels:
    name: fas-web
spec:
  replicas: 1
  selector:
    matchLabels:
      name: fas-web
  template:
    metadata:
      name: fas-web
      labels:
        name: fas-web
    spec:
      containers:
      - image: harbor.dev.com:8444/frontend-fas/fas-web:0.0.x
        name: fas-web
        ports:
          - containerPort: 8080
            name: http

```
***ตรง - image อย่าลืมเปลี่ยน version tags เพราะ harbor จะทำการไป pull images จาก tags ที่เราทำการเขียนไว้ในไฟล์

> fas-web-svc.yml
```
apiVersion: v1
kind: Service
metadata:
  name: fas-web-svc
  labels:
    name: fas-web-svc
spec:
  type: NodePort
  ports:
    - name: fas-web-svc
      port: 8080
      targetPort: 8080
  selector:
    name: fas-web

```
9) copy file [fas-web-pod.yml]  และ [fas-web-svc.yml] ขึ้น server
```
SSH เข้าเครื่อง Web
172.13.33.1 (fas) 
172.13.33.2 (pps) 
172.13.33.3 (sds),(webcl)

ใช้รหัสเดียวกัน
User : root
Password : =u;b9sohkg[njv

ssh root@172.13.33.2
```
10) ไปที่ Folder ที่นำไฟล์ขึ้นไป จากนั่นใช้คำสั่ง (เรียงกัน)
```
kubectl get pods -n fas      (ไว้สำหรับ list pod ที่ online อยู่ทั้งหมด เพื่อตรวจเช็ค)
kubectl delete -f fas-web.yml      ( ไว้สำหรับ ลบ pod และ svc ทั้งหมด)
kubectl create -f fas-web.yml      (ไว้สำหรับสร้าง pod และ svc ทั้งหมด)
```

[ ***ตรวจสอบ error*** ]
```
kubectl logs -f <ชื่อpod>

get ชื่อ pod จาก 
kubectl get pods

ตัวอย่าง : kubectl logs -f fas-web-7889dc6b55-n9wd
```


[ ***ปัญหาที่พบในบางครั้ง*** ]

พบปัญหาว่าบ้างครั้ง k8s ไม่สามารถไปดึง docker images มาจาก harbor ได้
ให้เราทำการ pull docker images เองโดย เข้าไปที่หน้า harbor แล้วทำการ copy คำสั่งดังรูป โดยอิงจากเลข Tag version ของ images

![](https://i.imgur.com/axhJTdw.png)

จะได้คำสั่ง ตัวอย่างเช่น
```
docker pull harbor.dev.com:8444/frontend-fas/fas-web:0.0.11
```
แล้วทำการ run คำสั่งบน server แล้วทำตามขึ้นตอนที่ [10](#10)

กรณีไม่สามารถ pull images จาก harbor ได้จากขั้นตอนด้านบน ซึ่งก็คือไม่สามารถ docker login ได้เลย โดยกรณีนี้เราจะทำการ save image จากเครื่อง local ของเราเอง แล้วนำไปขึ้น server เอง
```
# fas
docker save harbor.dev.com:8444/frontend-fas/fas-web:0.0.x | gzip > fas-web_0.0.x.tar.gz

# pps 
docker save harbor.dev.com:8444/frontend-pps/pps-web:0.0.x | gzip > pps-web_0.0.x.tar.gz
```

แล้วทำการ load image เข้า docker บน server โดยใช้คำสั่ง
```
# fas
docker load --input fas-web_0.0.x.tar.gz

# pps 
docker load --input pps-web_0.0.x.tar.gz
```

```
kubectl config set-context --current --namespace=pps
```

[reference คำสั่ง kube](https://github.com/pragasitcha/config/blob/master/README.md)

## VS Code Extension 🎁
- Angular Files
- Angular Snippets
- Auto Import
- TSLint


## Any library or extension for angular
- Bootstrap (สำหรับขึ้น layout)
- Material Angular


## รวม Module Custom 👽 และเอกสารต่างๆ
#### เพื่อช่วยในการทำงานและเป็น Guideline สำหรับงานต่อๆ ไป

- ngx-mask สำหรับแปลงหน้าตา input เช่น 2000 -> 2,000 https://stackblitz.com/edit/ngx-mask-rlzyd1?file=src%2Fapp%2Fapp.component.html
- angular-language-swither เปลี่ยนภาษา https://stackblitz.com/edit/angular-language-swither
- stackbar chart (apex chart) https://stackblitz.com/edit/angular-n5ys8l
- save .zip file https://stackblitz.com/edit/angular-save-filezip-from-base64
- ckeditor ตัว editor pps พวกส่งเมล์ https://stackblitz.com/edit/angular7-ckeditor-inline-example
- drag and drop เอกสาร https://v7.material.angular.io/cdk/drag-drop/overview
- radio button ทำตัวครอบ radio https://stackblitz.com/edit/angular-material-radio-warpper
- ระวังเรื่องการ Copy Array โดยใช้ '=' https://www.samanthaming.com/tidbits/35-es6-way-to-clone-an-array/
- Template ngModule ไม่รอค่าจาก api ทำให้บางครั้งเกิด error undefined เนื่องจาก Template ไม่รอข้อมูลที่เป็น async https://angular.io/guide/template-expression-operators#safe-navigation-operator

- Get Current Router
https://stackoverflow.com/questions/34597835/how-to-get-current-route