Angular 安装及HelloWord开始

Angular 环境搭建

 

1、 安装前准备工作:
1.1、 安装 nodejs

node -v  查看版本,是时也可以看是否安装好!

安装 angular 的计算机上面必须安装最新的 nodejs--注意安装 nodejs 稳定版本
1.2、 安装 cnpm
npm 可能安装失败建议先用 npm 安装一下 cnpm 用淘宝镜像安装
https://npm.taobao.org/
npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm -v  
2、 使用 npm/cnpm 命令安装 angular/cli 只需要安装一次
npm install -g @angular/cli 或者 cnpm install -g @angular/cli

 
Hello Word 

打开命令行工具找到你要创建项目的目录
2. 创建项目
ng new 项目名称
直接安装:
ng new angulardemo
如果要跳过 npm i 安装:
ng new angulardemo --skip-install
3. 运行项目
cd angulardemo
ng serve --open

常见错误:

npm 安装 angular/cli 失败
解决方案: 用 cnpm 安装
2、 创建项目 npm i 的时候失败
解决方案 1ctrl+c 结束项目, cd 到项目里面, 用 cnpm i 安装依赖
解决方案 2: 创建项目的时候 --skip-install
3、 创建项目后用 npm i 或者 cnpm i 后项目没法运行
解决方案: 用 yarn 替代 cnpm npm
1 cnpm instal @angular/cli (我的 npm 会报错)
2 ng new 的时候阻止自动安装 ng 包, 只创建 ng 目录
3 安装 yarn npm install -g yarn / cnpm install -g yarn
4 进入目录 my-app 使用 yarn 安装 ng 所依赖的包 yarn
注意: yarn 命令 等同于 npm install / cnpm install 使用 yarn 前提是先安装 yarn ,
安装使用 cnpm install -g yarn 就可以安装

可能碰到的问题:

使用ng serve 命令运行项目时报错:
在这里插入图片描述
解决方法:
使用管理员权限打开powershell
执行命令: set-executionpolicy remotesigned

 

升级Angular后ng serve出错Cannot find module @angular-devkit/build-angular/package.json

Webstom运行Angular项目出错:
升级了Angular版本后,原来的项目版本低了,与新版本不匹配,所以运行了出现如下错误

An unhandled exception occurred: Cannot find module '@angular-devkit/build-angular/package.json'
Require stack:
- C:\Users\hyh\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\@angular-devkit\architect\node\node-modules-architect-host.js
- C:\Users\hyh\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\@angular-devkit\architect\node\index.js
- C:\Users\hyh\AppData\Roaming\npm\node_modules\@angular\cli\models\architect-command.js
- C:\Users\hyh\AppData\Roaming\npm\node_modules\@angular\cli\commands\serve-impl.js
- C:\Users\hyh\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\@angular-devkit\schematics\tools\export-ref.js
- C:\Users\hyh\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\@angular-devkit\schematics\tools\index.js
- C:\Users\hyh\AppData\Roaming\npm\node_modules\@angular\cli\utilities\json-schema.js
- C:\Users\hyh\AppData\Roaming\npm\node_modules\@angular\cli\models\command-runner.js
- C:\Users\hyh\AppData\Roaming\npm\node_modules\@angular\cli\lib\cli\index.js
- C:\Users\hyh\AppData\Roaming\npm\node_modules\@angular\cli\lib\init.js
- C:\Users\hyh\AppData\Roaming\npm\node_modules\@angular\cli\bin\ng
See "C:\Users\hyh\AppData\Local\Temp\ng-OA8Bc8\angular-errors.log" for further details.

解决办法:
1.要安装package.json中提到的包:

npm install 或 cnpm install

2.删除无关的包

npm prune 或 cnpm prune

然后再输入ng serve运行就没问题了

 

AN UNHANDLED EXCEPTION OCCURRED: CANNOT FIND MODULE '@ANGULAR-DEVKIT/BUILD-ANGULAR/PACKAGE.JSON'

再执行启动命令ng sng serve时报错了,错误如下:
在这里插入图片描述

An unhandled exception occurred: Cannot find module '@angular-devkit/build-angular/package.json'
Require stack:
- C:\Users\master\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\@angular-devkit\architect\node\node-modules-architect-host.js
- C:\Users\master\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\@angular-devkit\architect\node\index.js
- ..省略..

网上找了好多,都解决不了问题,最后发现@angular-devkit/build-angular这个包是在Angular 6.0中新引入的,安装即可,命令如下:

npm install -save-dev @angular-devkit/build-angular

问题4:ng new 项目名时报错: setTimeout is not defined
解决办法:
npm uninstall -g @angular/cli
成功后再安装:npm install -g @angular/cli 问题解决


 

posted @ 2020-08-16 22:29  三瑞  阅读(270)  评论(0编辑  收藏  举报