開發 Angular 就不能不知道 Angular CLI 這個超級好用的命令列工具,有了這個工具,原本渾沌的開發環境,頓時清晰,許多繁瑣的瑣事,一個命令就搞定!這邊是我自己的操作筆記,讓記憶力不佳的我,有個地方可以方便查詢。

這裡的內容不保證最新,但會盡量持續更新。

最即時的文件請參考 Angular CLI 在 Github 上的文件,例如要查 ng new 這個指令的用法,請參考這個連結

常用指令

  • 預覽新專案:ng new AppName --routing -si -st -d
  • 建立新專案:ng new AppName --routing -si -st
  • 啟動:ng serve

ng new

  • 指令:ng new <project-name> [options]
  • 說明:建立 Angular 專案,預設此專案會建立在目前的路徑下
  • 選項:
    • --routing
      • 使用路由機制,並建立路由檔
    • --dry-run
      • 只輸出會建立的檔案名稱,不會真的產生檔案
      • 別名:-d
    • --skip-install
      • 當專案建立後,不執行任何 npm/yarn 安裝指令
      • 別名:-si
    • --skip-tests
      • 當專案建立後,不增加單元測試檔案
      • 別名:-st
    • --skip-e2e
      • 當專案建立後,不增加 e2e 測試檔案
      • 別名:-se
    • --skip-git
      • 此專案不建立 git 庫
      • 別名:-sg
    • --directory
      • 設定專案要建立在哪個資料夾內
      • 如果要將產生的專案放在當前資料夾,可這樣下參數 --directory ./
    • --verbose
      • 輸出更多資訊
      • 別名:-v

ng init

  • 指令:ng init <project-name> [options]
  • 說明:在目前資料夾下建立 Angular 專案(不會產生資料夾)
  • 選項:
    • --dry-run
      • 只輸出會建立的檔案名稱,不會真的產生檔案
      • 別名:d
    • --verbose
      • 輸出更多資訊
      • 別名:v
    • --skip-npm
      • 當專案建立後,不執行任何 npm 指令
    • --name
      • 設定專案名稱

ng completion

  • 指令:ng completion
  • 說明:在目前的 shell 底下增加自動補完 ng 指令的功能

ng doc

  • 指令:ng doc <keyword>
  • 說明:開啟瀏覽器查詢 <keyword> 用法。相當於在 angular.io API Reference 中查詢 API 文件。

ng e2e

  • 指令:ng e2e
  • 說明:使用 protractor 執行所有 end-to-end 測試你的應用程式

ng format

  • 指令:ng format
  • 說明:Formats the code of this project using clang-format.

ng generate

  • 指令:ng generate <type> [options]
  • 說明:Generate new code inside your project.
  • 別名:g
  • 有效類型:
    • component <path/to/component-name> Generates a component.
    • directive <path/to/directive-name> Generates a directive.
    • route <route/to/route-component> Generates a route. The name should be the route used in the RouteConfig.
    • pipe <path/to/pipe-name> Generates a pipe.
    • service <path/to/service-name> Generates a service.

每個產生的元件有各自的資料夾,除非使用 --flat 選項

  • 選項:
    • --flat 不建立資料夾
    • --route=<route> Specify the parent route. Only for generating components and routes. Default to the path specified.
    • --skip-router-generation Skip generating the route config for the parent. Only usable for routes.
    • --default Specify that the route should be a default route.
    • --lazy Specify that the route is lazy. Default to true.

ng get

  • 指令:ng get <path1, path2, ...pathN> [options]
  • 說明:Get a value from the Angular CLI configuration. The pathN arguments is a valid JavaScript path like “users[1].userName”. If the value isn’t set, “undefined” will be shown. This command by default only works inside a project directory.
  • 選項:
    • --global Returns the global configuration value instead of the local one (if both are set). This option also makes the command work outside of a project directory.

ng set

  • 指令:ng get <path1=value1, path2=value2, ...pathN=valueN> [options]
  • 說明:Set a value in the Angular CLI configuration. By default, sets the value in the project’s configuration if ran inside a project, or fails if not inside a project. The pathN arguments is a valid JavaScript path like “users[1].userName”. The value will be coerced to the proper type or will throw an error if the type cannot be coerced.
  • 選項:
    • --global Sets the global configuration value instead of a local one. This also makes ng set works outside a project.

ng github-pages:deploy

  • 指令:ng github-pages:deploy [options]
  • 說明:Build the application for production, setup the GitHub repository, then publish the app.
  • 選項:
    • --message=<message> Commit message to include with the build. Defaults to “new gh-pages version”.
    • --environment=<env> The Angular environment to build. Defaults to “production”.
    • --branch=<branch-name> The git branch to push the pages to. Defaults to “gh-branch”.
    • --skip-build Skip building the project before publishing.
    • --gh-token=<token> API token to use to deploy. Required.
    • --gh-username=<username> The Github username to use. Required.

ng lint

  • 指令:ng lint
  • 說明:執行 codelyzer linter 檢查你的專案

ng test

  • 指令:ng test [options]
  • 說明:使用 karma 執行單元測試
  • 選項:
    • --watch Keep running the tests. Default to true.
    • --browsers, --colors, --reporters, --port, --log-level Those arguments are passed directly to karma.

ng version

  • 指令:ng version
  • 說明:輸出 angular-cli、node 和作業系統版本

參考資料:


Poy Chang

Trial and Error