AngularJS安裝版本問(wèn)題解析
一、安裝
Angular CLI 腳手架安裝命令:
npm install -g @angular/cli
在安裝前請(qǐng)確保自己安裝NodeJS環(huán)境版本為V18及以上,否則會(huì)因node版本問(wèn)題導(dǎo)致項(xiàng)目無(wú)法正常運(yùn)行。
腳手架安裝后,已提示了當(dāng)前node版本必須為18.13.0或大于20.9.0版本:

在node版本不一致情況下,創(chuàng)建項(xiàng)目會(huì)提示Node.js版本必須為v18.13,如下圖:

二、匹配版本
本人電腦上使用的node版本為v16,在不升級(jí)node版本情況下,可以考慮降低@angular/cli版本,地址:Releases · angular/angular-cli · GitHub
2.1 安裝命令
在Releases中找到對(duì)應(yīng)版本進(jìn)行安裝,命令如下:
npm install -g @angular/cli@16.2.6
此時(shí)則沒有版本問(wèn)題提示了,如下圖:

2.2 創(chuàng)建項(xiàng)目
D:\workspace\web\angular>ng new hello-world
? Would you like to share pseudonymous usage data about this project with the Angular Team
at Google under Google's Privacy Policy at https://policies.google.com/privacy. For more
details and how to change this setting, see https://angular.io/analytics. Yes
Thank you for sharing pseudonymous usage data. Should you change your mind, the following
command will disable this feature entirely:
ng analytics disable --global
Global setting: enabled
Local setting: No local workspace configuration file.
Effective status: enabled
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS [ https://sass-lang.com/documentation/syntax#scss
]
CREATE hello-world/angular.json (2899 bytes)
CREATE hello-world/package.json (1042 bytes)
CREATE hello-world/README.md (1064 bytes)
CREATE hello-world/tsconfig.json (901 bytes)
CREATE hello-world/.editorconfig (274 bytes)
CREATE hello-world/.gitignore (548 bytes)
CREATE hello-world/tsconfig.app.json (263 bytes)
CREATE hello-world/tsconfig.spec.json (273 bytes)
CREATE hello-world/.vscode/extensions.json (130 bytes)
CREATE hello-world/.vscode/launch.json (470 bytes)
CREATE hello-world/.vscode/tasks.json (938 bytes)
CREATE hello-world/src/main.ts (214 bytes)
CREATE hello-world/src/favicon.ico (948 bytes)
CREATE hello-world/src/index.html (296 bytes)
CREATE hello-world/src/styles.scss (80 bytes)
CREATE hello-world/src/app/app-routing.module.ts (245 bytes)
CREATE hello-world/src/app/app.module.ts (393 bytes)
CREATE hello-world/src/app/app.component.html (23115 bytes)
CREATE hello-world/src/app/app.component.spec.ts (1006 bytes)
CREATE hello-world/src/app/app.component.ts (216 bytes)
CREATE hello-world/src/app/app.component.scss (0 bytes)
CREATE hello-world/src/assets/.gitkeep (0 bytes)
√ Packages installed successfully.
warning: LF will be replaced by CRLF in .editorconfig.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in .gitignore.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in .vscode/extensions.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in .vscode/launch.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in .vscode/tasks.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in README.md.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in angular.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in package-lock.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in package.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app-routing.module.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.component.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.component.spec.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.component.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.module.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/main.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/styles.scss.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in tsconfig.app.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in tsconfig.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in tsconfig.spec.json.
The file will have its original line endings in your working directory
Successfully initialized git.2.3 運(yùn)行項(xiàng)目
選擇項(xiàng)目目錄:
D:\workspace\web\angular>cd hello-world
運(yùn)行hello-world項(xiàng)目命令如下:
D:\workspace\web\angular\hello-world>ng serve --open
? Would you like to share pseudonymous usage data about this project with the Angular Team
at Google under Google's Privacy Policy at https://policies.google.com/privacy. For more
details and how to change this setting, see https://angular.io/analytics. Yes
Thank you for sharing pseudonymous usage data. Should you change your mind, the following
command will disable this feature entirely:
ng analytics disable
Global setting: enabled
Local setting: enabled
Effective status: enabled
√ Browser application bundle generation complete.
Initial Chunk Files | Names | Raw Size
vendor.js | vendor | 2.35 MB |
polyfills.js | polyfills | 333.17 kB |
styles.css, styles.js | styles | 230.92 kB |
main.js | main | 48.74 kB |
runtime.js | runtime | 6.52 kB |
| Initial Total | 2.96 MB
Build at: 2024-02-26T08:05:28.353Z - Hash: daa545468f767600 - Time: 33009ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
√ Compiled successfully.運(yùn)行結(jié)果下圖:

如上圖,項(xiàng)目可以正常運(yùn)行了。
到此這篇關(guān)于AngularJS安裝版本問(wèn)題的文章就介紹到這了,更多相關(guān)AngularJS安裝版本問(wèn)題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Angular 數(shù)據(jù)請(qǐng)求的實(shí)現(xiàn)方法
本篇文章主要介紹了Angular 數(shù)據(jù)請(qǐng)求的實(shí)現(xiàn)方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
Angular4.0中引入laydate.js日期插件的方法教程
在AngularJs中我們會(huì)不可避免的使用第三方庫(kù),例如jquery插件庫(kù)。下面這篇文章主要給大家介紹了關(guān)于Angular4.0中引入laydate.js日期插件的相關(guān)資料,需要的朋友可以參考借鑒,下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
AngularJS表格樣式簡(jiǎn)單設(shè)置方法示例
這篇文章主要介紹了AngularJS表格樣式簡(jiǎn)單設(shè)置方法,結(jié)合實(shí)例形式分析了AngularJS結(jié)合bootstrap針對(duì)表格樣式的相關(guān)設(shè)置技巧,需要的朋友可以參考下2017-03-03
簡(jiǎn)述AngularJS相關(guān)的一些編程思想
這篇文章主要介紹了AngularJS相關(guān)的一些編程思想,AngularJS是一款熱門的JavaScript庫(kù),推薦!需要的朋友可以參考下2015-06-06
angular4應(yīng)用中輸入的最小值和最大值的方法
這篇文章主要介紹了angular4應(yīng)用中輸入的最小值和最大值的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05
Angular Universal服務(wù)器端渲染避免 window is not&
這篇文章主要介紹了Angular Universal服務(wù)器端渲染避免 window is not defined錯(cuò)誤消息,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07

