angular6開發不徹底筆記（一） -- ng-cli

新建項目

請在終端/控制檯窗口中運行 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文件 -- --no-spec

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