angluar2 cli 是一个比较好的工具 。解决 Angular 2 环境设置是一大入门门槛,有22%的人说环境设置太过复杂。Angular CLI的诞生,正是为了解决这个问题。
1. 基本介绍
方便大家进行使用,给大家罗列了一些传送地址 。 有可能要“搭梯子” 。
老套路官网
2. 安装配置
由于 angluar2 项目是采用 typescript 编写 , 所以有一些必要操作需要提前完成,最后安装 angular-cli
npm install -g typescript typings npm install -g angular-cli
3. cli操作
为了方便操作,本人把 cli 操作分为 “创建”,“运行”,“测试” ,“发布” 。 操作使用最少的是“发布” 。
3.1 操作命令
创建 操作有 4 使用的比较多 还有 2 种比较 复杂的 “ng new PROJECT_NAME” 和 “ng build” 。
ng generate component my-new-component // 全写 ng g component my-new-component // 简写 ng g component ../newer-cmp // 指定路径
Scaffold | Usage |
---|---|
Component | ng g component my-new-component |
Directive | ng g directive my-new-directive |
Pipe | ng g pipe my-new-pipe |
Service | ng g service my-new-service |
3.2 运行
创建项目后我们最关心看到 结果 。 cli 也帮我们想到了 。
ng serve // 运行 ng serve --port 4201 --live-reload-port 49153 // 指定运行 ng serve -prod // 配置运行 相关联文件 src/client/app/environment.ts , config/environment.dev.ts ,config/environment.prod.ts ng build -prod // 注意
3.3 测试
让项目更良好的运行,cli 实现了 Karma 和 e2e 两种测试。命令如下
ng test // karma ng e2e // e2e
3.4 发布
目前发布支持,Github Pages或者Firebase 。 命今如下
ng github-pages:deploy --message "Optional commit message"
3.5 其他
更多 命令 可以用 , 查看 。
ng help
4. 遇到坑
4.1 问题
Error: Attempting to watch missing directory: typings
解决
npm install -g typings typings install
4.2 问题
message Unable to connect to “https://api.typings.org/entries/dt/angular-protractor/tags/1.5.0%2B20160425143459″
解决
需要 “搭梯子”
4.3 问题
Could not require ‘angular-cli-build.js‘: Cannot find module ‘angular-cli/lib/broccoli/angular2-app’
npm link angular-cli