一．安裝node.js
1.下載node.js安裝包（要求node版本大于12.20）
Node.js官方網(wǎng)站 ：https://nodejs.org/en/
進入官網(wǎng)后，當(dāng)前頁面下載的是最新版本，如需要下載歷史版本，點擊紅框標(biāo)注的其他下載，在進入的新的頁面底部，選擇紅框標(biāo)準(zhǔn)的先前版本，然后下載相應(yīng)的版本，在跳轉(zhuǎn)的頁面下載win64的版本即可。
2.安裝node.js
打開安裝包，傻瓜式下一步即可。
此處建議在其他盤如D盤創(chuàng)建一個新的文件夾（Nodejs）用來保存安裝。然后一直點Next即可完成安裝。
3.驗證安裝是否成功
打開cmd命令窗口，分別輸入node -v和npm -v，如果顯示出安裝的版本，代表安裝成功
4.修改全局模塊下載路徑
我們在第四步安裝的時候選擇了自定義保存路徑D:\Nodejs】，我們需要把全模塊下載路徑和cache緩存路徑也放在自定義的路徑下【D:\Nodejs】。具體操作是，我們在【D:\Nodejs】下創(chuàng)建兩個文件夾【node_global】和【node_cache】,如下圖
創(chuàng)建完成后再次打開cmd，設(shè)置命令。
A.修改全局模塊路徑：
npm config set prefix "D:\Nodejs\node_global"
B.修改全局緩存路徑
npm config set cache "D:\Nodejs\node_cache"
C.檢查是否修改成功
Npm config ls -l
D.修改系統(tǒng)環(huán)境變量（與java配置環(huán)境變量類似）
1.將【用戶變量】下的【Path】修改為【D:\Nodejs\node_global】
2.在【系統(tǒng)變量】下新建【NODE_PATH】（D:\Nodejs\node_global\node_modules）
3.在【系統(tǒng)變量】下的【Path】新建添加node全局文件夾【D:\Nodejs】，之后點擊確定。
二．安裝angular
1.安裝angular?cli
1.npm install -g @angular/cli@13.2.3
2.如果安裝版本錯誤，一般可先將本地已安裝的版本卸載再次重新安裝
2.1 npm uninstall -g @angular/cli 卸載之前的版本
2.2 npm cache verify 清理緩存，確保卸載干凈
2.3 ng v ，若顯示類似command not found的信息，則說明卸載完成
三．工程目錄結(jié)構(gòu)
1.整體工程目錄結(jié)構(gòu)
2.子系統(tǒng)目錄結(jié)構(gòu)
3.如何新增一個模塊以及頁面
3.1、工程啟動與配置
3.1.1 vsCode導(dǎo)入工程后執(zhí)行npm install ，下載最新的依賴
3.1.2 angular.json配置導(dǎo)出路徑
3.1.3 執(zhí)行npm run build命令啟動程序，如遇到內(nèi)存溢出，配置package.json
3.2、模塊
要創(chuàng)建一個頁面需要先創(chuàng)建一個模塊開始，假如需要一個系統(tǒng)設(shè)置相關(guān)的模塊，執(zhí)行命令：
ng g ng-alain:module sys
CLI 會自動在 src/app/routes/sys 下創(chuàng)建 sys.module.ts 和 sys-routing.module.ts 文件，前者是系統(tǒng)設(shè)置模塊組件定義文件；后者是系統(tǒng)設(shè)置模塊路由配置文件。
// sys.module.tsimport { NgModule, Type } from '@angular/core';import { SharedModule } from '@shared';import { SysRoutingModule } from './sys-routing.module';
const COMPONENTS: Type[] = [];
@NgModule({
imports: [SharedModule, SysRoutingModule],
declarations: COMPONENTS,
})export class SysModule {}
模塊的作用是導(dǎo)入我們需要的模塊，所有 NG-ZORRO、@delon/abc、@delon/chart 等都是按需求加載模塊，當(dāng)前業(yè)務(wù)頁需要哪里外部組件就導(dǎo)入哪些，為了減少這些導(dǎo)入動作，NG-ALAIN 提煉了兩個文件 shared-delon.module.ts、shared-zorro.module.ts 將一些整個項目經(jīng)常用到的模塊合并成一個叫 SharedModule 模塊內(nèi)，這也就是為什么需要在業(yè)務(wù)模塊內(nèi)第一時間導(dǎo)入它。注意：不建議把所有組件都放進 SharedModule 內(nèi)，盡可能將需要用到的模塊以二或三次以上使用才放進這里。
以及路由配置模塊：
// sys-routing.module.tsimport { NgModule } from '@angular/core';import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})export class SysRoutingModule {}
至此，你可以放心在 sys 目錄中開始開發(fā)像菜單管理、日志、系統(tǒng)配置等業(yè)務(wù)頁面。
3.3、頁面
利用 ng generate（可簡寫為：ng g） 命令在 sys 目錄下創(chuàng)建一個日志列表頁：
ng g ng-alain:list log -m=sys
了解更多請參考命令行工具。
最終，你可以訪問日志頁面。
當(dāng)然日志可能是一個非常豐富的信息，可以增加一個以模態(tài)框打開的查看頁來顯示更多詳情。
ng g ng-alain:view view -m=sys -t=log
-t=log 表示希望把創(chuàng)建的文件放進至 sys/log/view文章來源：http://www.zghlxwxcb.cn/news/detail-773004.html
3.4、參考文檔
https://ng-alain.com/docs/new-p文章來源地址http://www.zghlxwxcb.cn/news/detail-773004.html
到了這里，關(guān)于angular前端環(huán)境搭建、安裝angular的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
