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 serve -o

 

默认4200端口，如果需要修改端口运行ng serve -o --port 4000

 

运行成功后会打开如下画面

 

---

5.常见错误

(截取于https://blog.csdn.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

---

7.参考文章：

1，angular官方教程：

https://angular.io/guide/setup-local

2，Angular CLI生成 Angular 5项目使用详解：

https://www.php.cn/js-tutorial-395972.html

3，anjular安装Could not find module "@angular-devkit/build-angular"，卸载重新安装：

https://blog.csdn.net/qq_42705213/article/details/81977863