Angular CLI环境安装及官方入门购物车示例

1.开发环境

Node.js:Angular要求Node.js的版本为10.9.0及以上的版本。查看Nodejs版本 运行node -v;

Angular CLI环境安装及官方入门购物车示例

 

Npm包管理器:查看npm版本 运行 npm -v;

Angular CLI环境安装及官方入门购物车示例


2.安装Angular CLI

用管理员身份运行cmd,运行npm install -g @angular/cli (非管理员身份会安装失败,看打印出来的信息是否有error)

运行ng version查看是否安装成功

Angular CLI环境安装及官方入门购物车示例


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文件。

 

Angular CLI环境安装及官方入门购物车示例

Angular CLI环境安装及官方入门购物车示例


4.运行Angular项目

ng serve --open或者ng server -o

Angular CLI环境安装及官方入门购物车示例

 

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

Angular CLI环境安装及官方入门购物车示例

 

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

Angular CLI环境安装及官方入门购物车示例

 


5.常见错误

(截取于https://blog.****.net/qq_42705213/article/details/81977863)

angular安装Could not find module "@angular-devkit/build-angular"

卸载:npm uninstall -g angular-cli

Angular CLI环境安装及官方入门购物车示例

 

清理:npm cache clean

Angular CLI环境安装及官方入门购物车示例

清理失败

强制清理:npm cache clean –force

Angular CLI环境安装及官方入门购物车示例

 

找到anjular/cli安装目录,默认在用户\AppData\Roaming\npm\node_modules目录下@angular

Angular CLI环境安装及官方入门购物车示例

删除,然后重新安装再跑项目,ok


6.购物车示例

产品列表页

Angular CLI环境安装及官方入门购物车示例

产品详情页

Angular CLI环境安装及官方入门购物车示例

购物车页

Angular CLI环境安装及官方入门购物车示例

代码地址: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.****.net/qq_42705213/article/details/81977863