ng-cli

Posted 2020-08-25

angluar2 cli 是一个比较好的工具 。解决 Angular 2 环境设置是一大入门门槛，有22%的人说环境设置太过复杂。Angular CLI的诞生，正是为了解决这个问题。

1. 基本介绍

方便大家进行使用，给大家罗列了一些传送地址 。 有可能要“搭梯子” 。

老套路官网

https://cli.angular.io/

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