新建項目

請在終端/控制臺窗口中運行 ng -v 命令。 確定您已安裝@angular/cli
if沒有執行 npm install -g @angular/cli 全局安裝 Angular CLI。

ng new project-name 

就具體項目開發前調研技術棧追加相關參數

• 樣式style 如 --style=scss value值可以是（css | scss | sass | less | stylus ）等

• 項目中使用路由routing 如 --routing 生成routing module

• 前綴 prefix 如 --prefix 或 -p 默認為app,參數自定義 比如 --prefix=wn

後話

angular.json 文件中 "prefix": "app", 會更改為"prefix": "wn"
tslint驗證規則 項目中所有的組件前綴都改為wn開頭的 index.html文件<app-root></app-root>變為<wn-root><wn-root>
所有 ng g c component-name 生成的組件 prefix默認時使用<app-componet-name></app-componet-name> 自定義前綴後 <wn-componet-name></wn-componet-name>

綜合上述 ng new project-name --style=scss --routing --prefix=wn

更多參數參考 ng new

啟動項目

ng serve 或者 npm run start

• 開發環境項目如開始對接接口需要配置本地代理

1. 一般在根目錄下添加proxy.config.json文件

{
  "/api": {
    "target": "http://xxx.xxx.com",
    "secure": false,
    // "logLevel":"debug",
    "changeOrigin": true,
    "pathRewrite":{
      "^/api":""
    }
  }
}
 

1. 文件package.json中scripts 下 start的value值ng serve --proxy-config proxy.config.json 或者在angular.json 中 serve下 options添加屬性 "proxyConfig"："proxy.config.json"

ng serve 其他參數

• 接口默認4200 --port 4201
• 啟動時自動打開瀏覽器 --open 簡寫-o
• 用host指定運行主機 --host 0.0.0.0 或--public-host 192.168.1.111 指定瀏覽器客戶端將使用的URL
• 正在生成的應用程序的基URL --base-href /admin/或者 --base-href http://www.example.com/ 相當於index.html添加html標簽 屬性href規定頁面中所有相對鏈接的基準 URL。 如 <base href="http://www.example.com/"> 註：參數值後面一定要多個 / 結尾，否則無效

綜合上述1（未對接） ng serve --port 4201 --open

綜合上述2 ng serve --proxy-config proxy.config.json --host 0.0.0.0 --port 4201 --open

更多參數參考 ng serve

項目開發

1. 生成組件

• ng g c component-name 生成在src下全局組件
• ng g c module-name/component-name 組件生成在某模塊下src下，並聲明註冊該模塊
• ng g c path/component-name 組件生成在項目path路徑下，默認註冊父模塊，由父模塊決定是否是全局組件還是某模塊組件；

禁止生成spec.ts文件

1. 生成模塊 ng g m module-name 同上
   其他參數

• --routing 生成路由模塊。
  

• --module 允許指定聲明模塊

  綜上： ng g m module-name --routing --module module-name

1. 生成服務 ng g s service-name 同上

2. 生成管道(原1.x中過濾器) ng g p pipe-name

3. 生成指令 ng g d directive-name
   指令分 屬性型指令和結構型指令

4. 生成class ng g cl class-name class-mame一般首字母大寫，駝峰

5. 生成接口interface ng g i interface-name 接口為ts特性 類型檢查 聲明參數類型

更多參數參考 ng generate

編譯項目

ng build 或 npm run build

參數

• --base-href /myUrl/ 相當於在index.html中添加，默認

• --prod 通過UglifyJS 刪除更多未使用的代碼，使項目編譯後更小體積

• --output-hashing all 編譯後輸出文件名以哈希模式，便於緩存

• --stats-json 生成一個“stats.json”文件，可以使用諸如：webpack bundle analyzer‘或https://webpack.github.io/analyse.等工具進行前端分析。

• --aot 啟用aot預編譯

• --build-optimizer 使用“aot”選項時啟用@angular-devkit/build-optimizer 優化。

更多參數參考 ng build

angular6開發不完全筆記（一）