Angular 18+ 高级教程 – Angular CLI

前言

这篇会列出我开发中常用的 command. 并给予一些简单的说明

Command Format

先了解一下几个简单的 command 格式：

1. 缩写 shortform

   这个是完整版

   ng generate component my-component

   这个是 shortform 版

   ng g c my-component

   generate 变成了 g，component 变成了 c，很多 command 都有 shortform 的哦。

2. Parameter

   ng generate component --inline-style=true

   -- 代表这是个参数，参数是 key value pair

3. Boolean parameter default value

   ng generate component --inline-style

   boolean 没有赋值表示 true

4. Parameter = vs space

   ng generate component --inline-style false

   不用 = 用 space 也可以，我比较喜欢 space。

5. Parameter shortform

   完整版本

   ng generate component --inline-style false

   shortform 版

   ng g c -s false

   inline-style 变成了 s

   -- 也变成了 - 哦

查看当前版本

ng version

升级项目/CLI

升级 Global CLI

npm uninstall -g @angular/cli
npm install -g @angular/cli@latest // 升级到稳定版本
npm install -g @angular/cli@next   // 升级到 preview 版本

升级项目

ng update // 查看最新稳定版
ng update --next // 查看最新 preview 版
ng update @angular/cli @angular/core --next // 更新指定 package 到最新 preview 版本

创建项目

ng new my-app

options

--routing    // 包含 router
--style=scss // 使用 Scss
--standalone // 默认创建 standalone 组件 (without NgModule)
--skip-tests // 不包含单元测试

创建组件

ng g c my-component

// 创建组件 into module
ng g c my-component --standalone false -m my-module

// 创建组件 into path and module
ng g c my-module/my-component --standalone false -m my-module

创建管道 Pipe

ng g p my-pipe

创建 Service

ng g s my-service

Build Production

ng build

如果想检查 build 出来的代码，可以把 uglify 关掉

ng build --optimization=false