Angular CLI环境安装及官方入门购物车示例
1.开发环境
Node.js:Angular要求Node.js的版本为10.9.0及以上的版本。查看Nodejs版本 运行node -v;
Npm包管理器:查看npm版本 运行 npm -v;
2.安装Angular CLI
用管理员身份运行cmd,运行npm install -g @angular/cli (非管理员身份会安装失败,看打印出来的信息是否有error)
运行ng version查看是否安装成功
3.新建Angular项目
在工作区运行ng new angular(angular为新建项目的项目名,可自定义)
Angular CLI要安装必要的Angular npm软件包和其他依赖项,所以这个过程需要几分钟。
说明:
ng new my-app --dry-run:使用--dry-run参数,运行指令后不会真正生成项目,而是会打印出来如果创建该项目的话哪些文件将会生成;
ng new my-app --skip-install:使用--skip-install参数,运行指令后,生成项目文件后不执行npm install这个动作,不过以后还需要手动执行npm install;
ng new my-app --skip-tests:使用--skip-tests参数,运行之后后,项目不会生成spec文件。
4.运行Angular项目
ng serve --open或者ng server -o
默认4200端口,如果需要修改端口运行ng server -o --port 4000
运行成功后会打开如下画面
5.常见错误
(截取于https://blog.****.net/qq_42705213/article/details/81977863)
angular安装Could not find module "@angular-devkit/build-angular"
卸载:npm uninstall -g angular-cli
清理:npm cache clean
清理失败
强制清理:npm cache clean –force
找到anjular/cli安装目录,默认在用户\AppData\Roaming\npm\node_modules目录下@angular
删除,然后重新安装再跑项目,ok
6.购物车示例
产品列表页
产品详情页
购物车页
代码地址:https://github.com/Cherry180808/Angular/tree/master/angular