Angular Cli 构建 Angular 项目

一、环境搭建

基础工具安装

NodeJS 5.0以上版本,NPM 3.0以上版本；Typescript。
目前我用的是（node.js 6.10.3, npm 3.10.10）

安装Angular Cli
有两种方式安装：
强烈建议使用npm安装@angular/cli，不推荐使用淘宝镜像cnpm来安装。

1. 第一种安装方式，通过淘宝镜像。

   $ npm install -g cnpm --registry=https://registry.npm.taobao.org   //先安装cpm
   $ cnpm install -g @angular/cli   //用cnpm安装 Angular Cli

2. 第二种安装方式

   $ npm install -g @angular/cli@latest

注意事项
angular cli 安装失败，或是之前安装过，现在需要升级，一定要先卸载再重新安装。

$ npm uninstall -g @angular/cli
$ npm cache clean

找到 C:\Users\Administrator\AppData\Roaming\npm ，把ng和ng.cmd也删除

测试

$ ng -v

显示版本信息，表示安装成功

二、Angular Cli常用命令

$ ng new project-name //创建项目
$ ng serve //编译，启动服务器
$ ng serve --port 4201 //默认端口是4200 ，修改端口 
$ ng generate component newComponent //在项目中构建新代码
$ ng build  //构建项目存储在 /dist 目录中。

更多指令请参考

三、创建项目

新建项目

1. 第一种方式，这种方式比较慢，建议采用第二种。

   $ ng new project-name //创建项目
   $ cd project-name //进入目录
   $ ng serve //编译，启动服务器

2. 第二种方式

   $ ng new project-name --skip-install //创建项目,创建时不执行任何npm命令
   $ cd project-name //进入目录
   $ cnpm install //利用淘宝镜像安装npm
   $ ng serve //编译，启动服务器

打开浏览器输入 http://localhost:4200/，可以看到效果。

项目目录结构

赏

谢谢你请我吃糖果

微信