[S06E01] Angular CLI

https://www.youtube.com/watch?v=p3JoSKJntcs&list=PL9LUW6O9WZqgUMHwDsKQf3prtqVvjGZ6S&index=12

今天算第1天正式開始，跟新手村一樣，一開始都是最簡單的
我會很偷懶的把自己比較用不到，或大家都會的指令跳過

S06由Kevin Yang大大主講，藉由大大導讀文件後，我們就有能力能自己查文件了，這點蠻重要的

要怎麼安裝Angular CLI呢

• 先裝npm
• npm install -g @angular/cli

help指令

ng help # 列出可用指令
...
new (n) Creates a new workspace and an initial Angular app.
...
ng new --help # ng [command name] --help，例如:要查ng new有哪些參數可用

ng各指令的md檔

https://github.com/angular/angular-cli/tree/master/docs/documentation

ng new

建新專案
https://github.com/angular/angular-cli/blob/master/docs/documentation/new.md

--dry-run # 只顯示預計變更的檔案，不會真的新增
--force # 如果檔案已存在，覆蓋掉
--collection (-c)# 要使用哪個Schematics collection(範本)，要另外學
--inline-style # 不要有style檔，style寫在component.ts
--inline-template # 同上，不會產生html檔
--view-encapsulation # 預設針對css的scope要設多大，預設是同component，不會汙染到其他的元件
--routing # 一同產生routing module
--prefix # selector前面那個，例如:app-hero的app
--style # 指定要用的樣式語法，css、sass、scss，副檔名會變，編譯時會轉成css
--skip-tests (-S)# 不要建立spec單元測試的檔案

ng serve

編譯後開啟網頁服務，預設為 http://localhost:4200
https://github.com/angular/angular-cli/blob/master/docs/documentation/serve.md

--prod # production
# 網頁相關
--port
--host
--proxy-config
# https相關
--ssl
--ssl-key
--ssl-cert
--open # 要不要自動開啟預設Browser
--live-reload # 預設，一存檔就重新編譯
--aot # 啟用aot模式(Ahead of Time compilation)，編譯(檔案&&template)，可檢查ts以外的錯誤
--public-host # 要不要讓localhost以外的人連進來

ng build

https://github.com/angular/angular-cli/blob/master/docs/documentation/build.md

base-href # 當網站不是在root時要設定，否則在redirect時會出錯
# Sets base tag href to /myUrl/ in your index.html
ng build --base-href /myUrl/

prod # 使用prod就會有Bundling & Tree-Shaking
source-map # 可以看哪個部分造成bundle後的檔案太大(import或寫法有問題時)

deploy-url # 當靜態的js或css放在cdn的時候，deploy-url就是指到cdn的位置
            # 則index.html的script、style就會指到deploy-url
i18n-locale # 多國語系指定位置

ng generate

快速建立範本(Schematics)
https://github.com/angular/angular-cli/blob/master/docs/documentation/generate.md
例如，較常用的:class,component,directive,guard,interface,module,pipe,service

ng g c # 產生component，並加到AppModule(app.module.ts)

以component為例，
這些Schematics的樣本放在node_modules/@schematics/angular/component/files裡下

專案檔案說明(詳細的可參考其他大大的Angular系列文章)

• src/styles.css # 適用於全域，例如:bootstrap.css
• src/main.ts # application的啟動點
• assets #放靜態檔案
• .editorconfig # editor的設定，要多裝Extension，例如:EditorConfig for VS Code
• .gitignore # git要乎略的東西
• package.json # 給套件管理npm看的
  scripts # 例如:npm start、npm test，主要用來串很長的參數
  dependencies # 一般人需要裝的packages
  devDependencies # 開發這個package才需要裝的packages
• tsconfig.ts # 給ts compiler看的
  "lib":["es2017"] # 檢查語法
• angular.json # 定義在這個專案下，angular cli應該執行的所有行為
  包含:ng build、ng serve、ng test

$schema # 用來定義(檢查)這個json的格式，的schema的位置。如果想看詳細選項，可去參考該schema.json

projects # angular可以建「多個專案」
# ng g [application|library]，每個project有不同的sourceRoot(src的目錄)、
# architest(可設定指令，例如:ng run 專案名稱:build)，assets(裡面的東西會放到outputPath)、sytles、scripts要引入的全域的東西

# 1、首先看 architest/build裡的configurations
configurations # ng run 專案名稱:要跑的architest的設定:要跑的configurations的設定
# 例如: ng run projectName:build:production
# "configurations":{
production": { // 當跑production時要用的設定
...
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts" // 用with的檔案取代replace的
                }
              ]
...

# 2、architest/serve裡的東西
# serve的builder  "builder": "@angular-devkit/build-angular:dev-server",
# 跟
# build的builder  "builder": "@angular-devkit/build-angular:browser",
# 不同

# serve部分用到build裡的設定  "browserTarget": "ngx-admin-demo:build"
# 所以大部分設定都在build裡

schematics
# 如果放在最上層，會適用到projects裡所有的專案
# 如果放在projects裡的project裡，就只適用該project，優先權高於最上層的
# 例如:
  "schematics": {
    # 套件的名稱:相對應的命令
    "@schematics/angular:component": {
      "prefix": "ngx",
      "styleext": "scss"
    },
    "@schematics/angular:directive": {
      "prefix": "ngx"
    },
    # 設定ng g c時，不產生spec檔案
    "@schematics/angular:component": {
      "spec": false
    },
  }