王楚凯 發表於 2022-5-10 20:31:00

Angular – CLI

<h2>前言</h2>
<p>一年半没有写 Angular 了. 现在又要开始写了. 复习过程中也顺便整理一下笔记呗.</p>
<p>&nbsp;</p>
<h2>介绍</h2>
<p>CLI 是 Angular 的辅助工具. 输入一些 command 它会帮你 create 一些有结构的 files, 提升开发速度.</p>
<p>&nbsp;</p>
<h2>Global CLI 安装 &amp; 升级</h2>
<h3>Global 安装 CLI</h3>
<p>稳定版本</p>
<div class="cnblogs_code">
<pre>npm install -g @angular/cli</pre>
</div>
<p>最新版本</p>
<div class="cnblogs_code">
<pre>npm install -g @angular/cli@next</pre>
</div>
<p>指定版本</p>
<div class="cnblogs_code">
<pre>npm install -g @angular/cli@12.0.0</pre>
</div>
<h3>检查 version</h3>
<div class="cnblogs_code">
<pre>ng version</pre>
</div>
<h3>升级 Global CLI</h3>
<p>先删除, 然后安装新版本</p>
<div class="cnblogs_code">
<pre>npm remove @angular/cli -<span style="color: rgba(0, 0, 0, 1)">g
npm install </span>-g @angular/cli</pre>
</div>
<p>注: 这个只是升级 Global CLI 哦, 如何升级项目, 下面会讲到.</p>
<p>&nbsp;</p>
<h2>Help</h2>
<p>不清楚有哪些 command 可以输入</p>
<div class="cnblogs_code">
<pre>ng help</pre>
</div>
<p>它会显示所有的 command</p>
<p><img src="https://img2022.cnblogs.com/blog/641294/202205/641294-20220512143040559-685656951.png"></p>
<p>还可以深入某个 command 的 help</p>
<div class="cnblogs_code">
<pre>ng new --help</pre>
</div>
<p>太多资料, 这里就不展示了.</p>
<p>&nbsp;</p>
<h2>创建项目</h2>
<h3>创建简单项目</h3>
<p><img src="https://img2022.cnblogs.com/blog/641294/202205/641294-20220512143633833-1135445152.gif"></p>
<p>它会问你, 是否使用 routing 和 Scss style</p>
<p>files 结构</p>
<p><img src="https://img2022.cnblogs.com/blog/641294/202205/641294-20220512143817248-1245262783.png"></p>
<p>当前的 version 是 13, 使用 Yarn 但是没有 PnP. Github Issue: Yarn PnP Support Status</p>
<p>Angular 默认是开启 Unit Test 的, 如果不喜欢可以在创建项目的时候关掉它.</p>
<div class="cnblogs_code">
<pre>ng new my-angular-app --skip-tests --style=scss --routing</pre>
</div>
<h3>创建复杂项目</h3>
<p>复杂项目指的是多个 app 和 library 在同一个项目里. 这个看个人管理啦. 类似 Visual Studio 一个 Solution 里面有很多 Project 的概念.</p>
<h3>创建 solution</h3>
<p>先创建 solution</p>
<div class="cnblogs_code">
<pre>ng new my-angular-solution --create-application=<span style="color: rgba(0, 0, 255, 1)">false</span></pre>
</div>
<p>create-application=false 表示不要自动创建项目</p>
<p><img src="https://img2022.cnblogs.com/blog/641294/202205/641294-20220512150042143-593942013.png"></p>
<p>里面只有 angular config, 没有任何项目信息.</p>
<h3>创建项目</h3>
<p>假设有 2 个项目要创建, 一个是 client-app, 一个是 admin-control-panel</p>
<p>cd my-angular-solution 进入 folder, 然后输入 command</p>
<div class="cnblogs_code">
<pre>ng generate application my-admin-control-panel --routing --style=scss --skip-<span style="color: rgba(0, 0, 0, 1)">tests
ng generate app my</span>-client-app --routing --style=scss --skip-tests</pre>
</div>
<p><strong>Tips: </strong>第 2 行用了 application 的缩写 app, Angular CLI 许多 command 都支持缩写, 所以可以尽量试试看, 比如 ng generate application 其实可以写成 ng g app</p>
<p>用的 command 是 ng generate app, 后面的参数和创建简单项目是一样的.</p>
<p><img src="https://img2022.cnblogs.com/blog/641294/202205/641294-20220512150434129-1800610708.png"></p>
<p>这时就多了 2 个 project folder 了, angular.json 也添加了一些 project 的 config.</p>
<h3>创建 library</h3>
<p>多个项目一定会有一些 shared code. 这时就可以创建一个 local library 来管理</p>
<div class="cnblogs_code">
<pre>ng generate library my-shared-lib</pre>
</div>
<p>结构</p>
<p><img src="https://img2022.cnblogs.com/blog/641294/202205/641294-20220512150723606-1238440020.png"></p>
<p>这 3 个 项目虽然在同一个 solution 里, 但运行和发布都是分开的哦. 下面教你怎样运行起来.</p>
<p>&nbsp;</p>
<h2>Run a Project</h2>
<p>for 简单项目, 运行 command</p>
<div class="cnblogs_code">
<pre>ng serve --open</pre>
</div>
<p>open 是打开游览器的意思, 编译完它会自动开启游览器</p>
<p>这时就会看见美美的页面了</p>
<p><img src="https://img2022.cnblogs.com/blog/641294/202205/641294-20220512151250825-2057618006.png"></p>
<p>for 复杂项目, 需要选择其中一个 project, 而且它没有 --open 功能. 需要自己开 (我不知道为什么....)</p>
<div class="cnblogs_code">
<pre>ng serve --project=my-client-app</pre>
</div>
<p>&nbsp;</p>
<h2>Use IP Address &amp; Https</h2>
<p>参考:&nbsp;Vs Code, Visual Studio 2022, Angular and Live Server Running Through Https and IP Address&nbsp;(Angular 的部分)</p>
<p>&nbsp;</p>
<h2>升级项目</h2>
<p>先把 Global CLI 升级到最新, 然后 command</p>
<div class="cnblogs_code">
<pre>ng update</pre>
</div>
<p>这时会显示能升级的 package</p>
<p><img src="https://img2022.cnblogs.com/blog/641294/202205/641294-20220512162651598-1782527971.png"></p>
<p>注: Angular 只支持一级一级升哦, 比如 v12 &gt; 14 是不可以的, v12 &gt; v13 &gt; v14 就可以.</p>
<p>注: for 复杂项目, 一个 solution 里面所有的 project 都用统一版本会比较好管理. (我也不确定可以不可以不同 project 不同 version, 但最好不要. 太乱了)</p>
<p>接着输入升级 command</p>
<div class="cnblogs_code">
<pre>ng update @angular/cli @angular/core</pre>
</div>
<p>后面是所有要升级的 package name, 用空格 seperate</p>
<p>&nbsp;</p>
<h2>创建 Module &amp; Component</h2>
<p>这个可能是最常用的 command 了. 在用 ng 的时候通常会有 3 给 pattern.</p>
<p>1. 创建 component to&nbsp;existing module</p>
<p>发生在想添加更多的 component 到一个 module 里时</p>
<p>2. 创建 component with new module</p>
<p>发生在一个想创建一个新组件, 同时它需要一个独立的 module 时&nbsp;</p>
<p>3. 创建 module with routing and component</p>
<p>发生在想创建一个 lazy load routing. (通常是一个新的 page)</p>
<h3>创建 component to existing module</h3>
<p><img src="https://img2022.cnblogs.com/blog/641294/202205/641294-20220512173923824-1668594371.png"></p>
<p>创建一个 component 到 app module 里.</p>
<p>到 app module 的 folder 开启 command box</p>
<p><img src="https://img2022.cnblogs.com/blog/641294/202205/641294-20220512174019358-746642717.png"></p>
<p>运行 command</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">ng generate component first
ng g c first </span>// 缩写</pre>
</div>
<p>first 是 component 名字</p>
<p>CLI 会创建 folder 和 files</p>
<p><img src="https://img2022.cnblogs.com/blog/641294/202205/641294-20220512174249911-283338670.png"></p>
<p>同时会到 AppModule 里添加 component 的 declaration</p>
<p><img src="https://img2022.cnblogs.com/blog/641294/202205/641294-20220512174329704-1007031787.png"></p>
<p>除了到指定的 folder 创建, 还有一个方式是在 command 中提供 component path 和&nbsp;module name.</p>
<div class="cnblogs_code">
<pre>ng generate component client-app/src/app/first --module=<span style="color: rgba(0, 0, 0, 1)">app
ng g c client-app/src/app/first </span>--m app // 缩写</pre>
</div>
<p>path 就依据你的 command box 在哪里.</p>
<h3>创建 component with new module</h3>
<p>其实它没有一起创建的方式, 只能先创建 module</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">ng generate module second;
ng generate component second </span>--module=<span style="color: rgba(0, 0, 0, 1)">second;

ng g m second; ng g c second </span>--m second; // 缩写</pre>
</div>
<p>效果</p>
<p><img src="https://img2022.cnblogs.com/blog/641294/202205/641294-20220512182854505-856211511.png"></p>
<h3>创建 module with routing and component</h3>
<p>Angular 有特别 command 专门给这个场景的哦</p>
<div class="cnblogs_code">
<pre>ng generate module third --route=third --module=<span style="color: rgba(0, 0, 0, 1)">app
ng g m third </span>--route third --m app // 缩写</pre>
</div>
<p>route 是 path</p>
<p>效果</p>
<p><img src="https://img2022.cnblogs.com/blog/641294/202205/641294-20220512183253513-156717288.png"></p>
<p>&nbsp;</p>
<h2>Build as development for debug</h2>
<p>Angular 有一个 compile 过程, 这就导致有时候很难理解, 总觉得它背地里是不是搞了一些鬼东西.</p>
<p>比较好的做法就是开一个测试环境, 然后 build 一个 development 的版本 (production 都做了压缩什么的, 已经没法看了), 看看最终运行的代码, 再去对照源码, 这样就可以解开一些古里古怪的现象.</p>
<p>参考: stackoverflow –&nbsp;Build in dev mode for Angular 12</p>
<p>在 angular.json 里面有区分 build development 和 production 的 config</p>
<p><img src="https://img2022.cnblogs.com/blog/641294/202205/641294-20220515133142002-1734319046.png"></p>
<p>运行 command 时可以选择使用的 config, 默认是 production</p>
<div class="cnblogs_code">
<pre>ng build --configuration development</pre>
</div>
<p>还有一种方式是</p>
<div class="cnblogs_code">
<pre>env NG_BUILD_MANGLE=<span style="color: rgba(0, 0, 255, 1)">false</span> NG_BUILD_MINIFY=<span style="color: rgba(0, 0, 255, 1)">false</span> NG_BUILD_BEAUTIFY=<span style="color: rgba(0, 0, 255, 1)">true</span> ng build --prod</pre>
</div>
<p>不过在 Windows 下无法使用 env, 我懒得取研究了, 留一个链接在这, 以后才看</p>
<p>&nbsp;</p><br><br>
来源：https://www.cnblogs.com/keatkeat/p/16255156.html
頁: [1]
查看完整版本: Angular – CLI