angular --开发环境搭建及项目创建

时间:2022-02-21 11:02:55

1.配置node环境

1).下载node安装包并安装,以下下是我的node安装路径

angular --开发环境搭建及项目创建

2).安装完成之后在 选择 我的电脑 右键 选属性-> 高级系统设置 ->  环境变量 -> 新建 

变量名自定义,变量值写node的安装路径

如下是我的变量值:

angular --开发环境搭建及项目创建

3).查看node是否安装成功:

win+r 进入输入cmd进入命令行,输入 node -v 命令 ,安装成功之后会显示node的版本号,如下所示:

angular --开发环境搭建及项目创建

到此node安装成功。

在命令行,输入 npm -v 命令 ,查看npm的版本号

 

2.配置python环境

如果不安装python的话在进行第3步安装时会出现与python相关的错误,

python的安装与node的安装步骤相同,可以参照node的安装。

查看python是否安装的命令为  python  。

 

3.安装angular-cli

1).因为angular-cli是用typescript写的,所以要先装这个: npm install -g typescript typings

2).安装angular-cli :  npm install -g @angular/cli

 如果你之前安装失败过,最好在安装angular-cli之前先卸载干净,使用一下命令:
      npm uninstall -g angular-cli
      npm cache clean 
 
之后进入如下目录,删除ng和ng.cmd这两个文件。
 
angular --开发环境搭建及项目创建

 

3).由于被墙的原因按照普通方式安装可能会安装失败,因此可以设置淘宝镜像安装

设置方法1. npm config set registry https://registry.npm.taobao.org,

      成功之后再使用  npm install -g @angular/cli 安装即可。

设置方法2.可以直接使用npm安装淘宝镜像:npm i -g cnpm,

     安装成功使用 cnpm i -g @angular/cli 安装即可。


安装指定的angula版本:cnpm install -g @angular/cli@1.6.3

4).如果安装过程出现下载node-sass失败 请尝试单独安装node-sass  安装命令: npm install --save-dev node-sass。

5).检查angular-cli是否安装成功,在命令行使用 ng -v 查看是否成功

4.创建angular项目

1).创建angular新项目命令:ng new projectName ;注:projectName为项目的名称,等待项目自动创建。

2).项目创建成功之后切换到项目的目录下,使用 ng serve 启动项目,编译完成可以在浏览器地址栏输入http://localhost:4200/,就可以看到新创建的项目。

5.开发工作

 接下来就可以使用angular进行相关项目的代码编写

6.编译本地运行 ng serve

参照第4部分

7.打包

 进行打包 ng build 打包后会生成dist文件夹

angular的基本环境配置及编译基本结束,在angular2的开发中还有细节之处需要处理,在这里就不一一阐述,有什么问题可以私信或评论,如有不当之处还望指出^-^