Angular CLI ng常用命令整理

落日映苍穹つ 2022-06-01 04:53 235阅读 0赞

Angular CLI 的ng命令常用整理

当前对应版本：angular-cli:1.0.0    node:8.9.3   os:win32 x64

**1.创建项目 ng new**

**2.创建控件 ng g component **

<table style="margin-right:0px; margin-bottom:0px; margin-left:0px; padding:0px; border-color:silver; word-break:break-word; color:rgb(73,73,73); font-family:Arial,Helvetica,sans-serif; font-size:14px; background-color:rgb(244,237,227)"> 
 <thead style="margin:0px; padding:0px"> 
  <tr style="margin:0px; padding:0px"> 
   <th style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> 支持的类型</th> 
   <th style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> 用法</th> 
  </tr> 
 </thead> 
 <tbody style="margin:0px; padding:0px"> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> Component</td> 
   <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> ng g component my-new-component</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> Directive</td> 
   <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> ng g directive my-new-directive</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> Pipe</td> 
   <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> ng g pipe my-new-pipe</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> Service</td> 
   <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> ng g service my-new-service</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> Class</td> 
   <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> ng g class my-new-class</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> Interface</td> 
   <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> ng g interface my-new-interface</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> Enum</td> 
   <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> ng g enum my-new-enum</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> Module</td> 
   <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> ng g module my-module</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> Route</td> 
   <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> ng g route my-route<code style="margin:0px; padding:0px">当前已禁用</code></td> 
  </tr> 
 </tbody> 
</table>

构建的组件都会使用自用目录,除非 `--flat` 单独指定.

<table style="margin-right:0px; margin-bottom:0px; margin-left:0px; padding:0px; border-color:silver; word-break:break-word; color:rgb(73,73,73); font-family:Arial,Helvetica,sans-serif; font-size:14px; background-color:rgb(244,237,227)"> 
 <thead style="margin:0px; padding:0px"> 
  <tr style="margin:0px; padding:0px"> 
   <th style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> 参数</th> 
   <th style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> 描述</th> 
  </tr> 
 </thead> 
 <tbody style="margin:0px; padding:0px"> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> <code style="margin:0px; padding:0px">--flat</code></td> 
   <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> 不在自用目录内创建代码</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> <code style="margin:0px; padding:0px">--route=&lt;route&gt;</code></td> 
   <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> 指定父路由.仅用于生成组件和路由.默认为指定的路径.</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> <code style="margin:0px; padding:0px">--skip-router-generation</code></td> 
   <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> 跳过生成父路由配置。只能用于路由命令。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> <code style="margin:0px; padding:0px">--default</code></td> 
   <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> 指定路由应为默认路由。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> <code style="margin:0px; padding:0px">--lazy</code></td> 
   <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> 指定路由是延迟的。 默认为true。<br> </td> 
  </tr> 
 </tbody> 
</table>

**3.查看版本 ng version**

**4.启动运行 ng serve**

ng new PROJECT_NAME cd PROJECT_NAME ng serve

将会自动在浏览器中打开默认地址 `http://localhost:4200/`. 运行之后如果你修改了程序源代码.应用将会自动重载.

你也可以自定义配置 IP, 端口和实时重载端口号

ng serve --host 0.0.0.0 --port 4201 --live-reload-port 49153

**5.打包编译 ng build **

构建工件将存储在`/dist`目录中。

ng build可以指定构建目标（--target = production或--target = development）和要与该构建一起使用的环境文件（--environment = dev或--environment = prod）。 默认情况下，使用开发构建目标和环境。

# 这是生产构建 ng build --target=production --environment=prod ng build --prod --env=prod ng build --prod # 这是开发构建 ng build --target=development --environment=dev ng build --dev --e=dev ng build --dev ng build

6.等还有其他命令

参考来自：[https://www.cnblogs.com/ckAng/p/6693702.html][https_www.cnblogs.com_ckAng_p_6693702.html]

[Angular CLI简介][Angular CLI]

[Angular CLI简介2][Angular CLI_2]

[Angular2开发环境搭建之VS Code][Angular2_VS Code]

[https_www.cnblogs.com_ckAng_p_6693702.html]: https://www.cnblogs.com/ckAng/p/6693702.html
[Angular CLI]: http://blog.csdn.net/u011127019/article/details/78661287
[Angular CLI_2]: http://blog.csdn.net/u011127019/article/details/78662242
[Angular2_VS Code]: http://blog.csdn.net/u011127019/article/details/78680956