Angular – CLI

前言

一年半没有写 Angular 了. 现在又要开始写了. 复习过程中也顺便整理一下笔记呗.

介绍

CLI 是 Angular 的辅助工具. 输入一些 command 它会帮你 create 一些有结构的 files, 提升开发速度.

Global CLI 安装 & 升级

Global 安装 CLI

稳定版本

npm install -g @angular/cli

最新版本

npm install -g @angular/cli@next

指定版本

npm install -g @angular/cli@12.0.0

检查 version

ng version

升级 Global CLI

先删除, 然后安装新版本

npm remove @angular/cli -g
npm install -g @angular/cli

注: 这个只是升级 Global CLI 哦, 如何升级项目, 下面会讲到.

Help

不清楚有哪些 command 可以输入

ng help

它会显示所有的 command

还可以深入某个 command 的 help

ng new --help

太多资料, 这里就不展示了.

创建项目

创建简单项目

它会问你, 是否使用 routing 和 Scss style

files 结构

当前的 version 是 13, 使用 Yarn 但是没有 PnP. Github Issue: Yarn PnP Support Status

Angular 默认是开启 Unit Test 的, 如果不喜欢可以在创建项目的时候关掉它.

ng new my-angular-app --skip-tests --style=scss --routing

创建复杂项目

复杂项目指的是多个 app 和 library 在同一个项目里. 这个看个人管理啦. 类似 Visual Studio 一个 Solution 里面有很多 Project 的概念.

创建 solution

先创建 solution

ng new my-angular-solution --create-application=false

create-application=false 表示不要自动创建项目

里面只有 angular config, 没有任何项目信息.

创建项目

假设有 2 个项目要创建, 一个是 client-app, 一个是 admin-control-panel

cd my-angular-solution 进入 folder, 然后输入 command

ng generate application my-admin-control-panel --routing --style=scss --skip-tests
ng generate app my-client-app --routing --style=scss --skip-tests

Tips: 第 2 行用了 application 的缩写 app, Angular CLI 许多 command 都支持缩写, 所以可以尽量试试看, 比如 ng generate application 其实可以写成 ng g app

用的 command 是 ng generate app, 后面的参数和创建简单项目是一样的.

这时就多了 2 个 project folder 了, angular.json 也添加了一些 project 的 config.

创建 library

多个项目一定会有一些 shared code. 这时就可以创建一个 local library 来管理

ng generate library my-shared-lib

结构

这 3 个 项目虽然在同一个 solution 里, 但运行和发布都是分开的哦. 下面教你怎样运行起来.

Run a Project

for 简单项目, 运行 command

ng serve --open

open 是打开游览器的意思, 编译完它会自动开启游览器

这时就会看见美美的页面了

for 复杂项目, 需要选择其中一个 project, 而且它没有 --open 功能. 需要自己开 (我不知道为什么....)

ng serve --project=my-client-app

Use IP Address & Https

参考: Vs Code, Visual Studio 2022, Angular and Live Server Running Through Https and IP Address (Angular 的部分)

升级项目

先把 Global CLI 升级到最新, 然后 command

ng update

这时会显示能升级的 package

注: Angular 只支持一级一级升哦, 比如 v12 > 14 是不可以的, v12 > v13 > v14 就可以.

注: for 复杂项目, 一个 solution 里面所有的 project 都用统一版本会比较好管理. (我也不确定可以不可以不同 project 不同 version, 但最好不要. 太乱了)

接着输入升级 command

ng update @angular/cli @angular/core

后面是所有要升级的 package name, 用空格 seperate

创建 Module & Component

这个可能是最常用的 command 了. 在用 ng 的时候通常会有 3 给 pattern.

1. 创建 component to existing module

发生在想添加更多的 component 到一个 module 里时

2. 创建 component with new module

发生在一个想创建一个新组件, 同时它需要一个独立的 module 时 

3. 创建 module with routing and component

发生在想创建一个 lazy load routing. (通常是一个新的 page)

创建 component to existing module

创建一个 component 到 app module 里.

到 app module 的 folder 开启 command box

运行 command

ng generate component first
ng g c first // 缩写

first 是 component 名字

CLI 会创建 folder 和 files

同时会到 AppModule 里添加 component 的 declaration

除了到指定的 folder 创建, 还有一个方式是在 command 中提供 component path 和 module name.

ng generate component client-app/src/app/first --module=app
ng g c client-app/src/app/first --m app // 缩写

path 就依据你的 command box 在哪里.

创建 component with new module

其实它没有一起创建的方式, 只能先创建 module

ng generate module second;
ng generate component second --module=second;

ng g m second; ng g c second --m second; // 缩写

效果

创建 module with routing and component

Angular 有特别 command 专门给这个场景的哦

ng generate module third --route=third --module=app
ng g m third --route third --m app // 缩写

route 是 path

效果

Build as development for debug

Angular 有一个 compile 过程, 这就导致有时候很难理解, 总觉得它背地里是不是搞了一些鬼东西.

比较好的做法就是开一个测试环境, 然后 build 一个 development 的版本 (production 都做了压缩什么的, 已经没法看了), 看看最终运行的代码, 再去对照源码, 这样就可以解开一些古里古怪的现象.

参考: stackoverflow – Build in dev mode for Angular 12

在 angular.json 里面有区分 build development 和 production 的 config

运行 command 时可以选择使用的 config, 默认是 production

ng build --configuration development

还有一种方式是

env NG_BUILD_MANGLE=false NG_BUILD_MINIFY=false NG_BUILD_BEAUTIFY=true ng build --prod

不过在 Windows 下无法使用 env, 我懒得取研究了, 留一个链接在这, 以后才看