当前位置: 代码网 > it编程>前端脚本>AngularJs > AngularJS安装版本问题解析

AngularJS安装版本问题解析

2024年05月15日 AngularJs 我要评论
一、安装angular cli 脚手架安装命令:npm install -g @angular/cli在安装前请确保自己安装nodejs环境版本为v18及以上,否则会因node版本问题导致项目无法正常

一、安装

angular cli 脚手架安装命令:

npm install -g @angular/cli

在安装前请确保自己安装nodejs环境版本为v18及以上,否则会因node版本问题导致项目无法正常运行。

脚手架安装后,已提示了当前node版本必须为18.13.0或大于20.9.0版本:

在node版本不一致情况下,创建项目会提示node.js版本必须为v18.13,如下图:

二、匹配版本

本人电脑上使用的node版本为v16,在不升级node版本情况下,可以考虑降低@angular/cli版本,地址:releases · angular/angular-cli · github

2.1 安装命令

在releases中找到对应版本进行安装,命令如下:

npm install -g @angular/cli@16.2.6

此时则没有版本问题提示了,如下图:

2.2 创建项目

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 运行项目

选择项目目录:

d:\workspace\web\angular>cd hello-world

运行hello-world项目命令如下:

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.

运行结果下图:

如上图,项目可以正常运行了。

到此这篇关于angularjs安装版本问题的文章就介绍到这了,更多相关angularjs安装版本问题内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网!

(0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com