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

ng-cli的更多相关文章

  1. ng/cli uses yarn as the package manager

    Switch to working directory Excuting the following command ng config cli.packageManager yarn

  2. angular 2 - 001 ng cli的安装和使用

    angular cli 创建项目和组件 ng new my-app --skip-install cd my-app cnpm install ng serve localhost:4200 angu ...

  3. ng/cli new skip install and do not create a folder

    ng new myApp --skip-install --directory ./

  4. 新建ng工程

    有问题多看官网文档https://www.angular.cn/guide/quickstart 1 在远程仓库建立 1个完全空的仓库,不要建立readme.MD  ng cli创建时会创建readm ...

  5. 记录项目版本升级angular4 ~ angular5

    前言: 在上一篇ng4文章<angular4--实际项目搭建总结>中说过,等到ng5正式发布,并且蚂蚁的NG ZORRO兼容ng5之后,我会对ng4项目进行升级.这篇文章就是大概说下升级的 ...

  6. .Net Core应用框架Util介绍(三)

    上篇介绍了Util的开发环境,并让你把Demo运行起来.本文将介绍该Demo的前端Angular运行机制以及目录结构. 目录结构 在VS上打开Util Demo,会看见如下的目录结构. 现代前端通常采 ...

  7. 【asp.net core mvc + angular6实战】 - 1. 环境搭建

    为什么打算写这些文章? 没有为什么,只是为了学习Angular和更了解.Net Core等技术 需要用到的技术? 后端使用.Net Core 2.1 + EF Core 2.1 + Mysql 5.7 ...

  8. angular schametics 使用记录

    什么是 schametics Schematics是Angular团队发布的一个代码生成工具.它提供了API,可以操作文件并在Angular项目中添加新的依赖项,ng cli 创建模板就是用它. 它也 ...

  9. 大厂是如何用DevCloud流水线实现自动化部署Web应用的?

    DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师. 官方网站:devui.design Ng组件库:ng-devui(欢 ...

  10. 如何解决异步接口请求快慢不均导致的数据错误问题? - DevUI

    DevUI 是一款面向企业中后台产品的开源前端解决方案,它倡导沉浸.灵活.至简的设计价值观,提倡设计者为真实的需求服务,为多数人的设计,拒绝哗众取宠.取悦眼球的设计.如果你正在开发 ToB 的工具类产 ...

随机推荐

  1. hdu 5429 Geometric Progression(存个大数模板)

    Problem Description Determine whether a sequence is a Geometric progression or not. In mathematics, ...

  2. ecshop 管理员不需要旧密码

  3. Angular学习笔记(2)——TODO小应用

    Angular学习笔记(2)--TODO小应用 1. 写在前面 之前我们跑了Angular的Hello World,你是不是对它有点感觉了呢?这一篇将结合一个TODO程序来继续学习Angular的用法 ...

  4. python高级编程之选择好名称:完

    由于时间关系,python高级编程不在放在这边进行学习了,如果需要的朋友可以看下面的网盘进行下载 # # -*- coding: utf-8 -*- # # python:2.x # __author ...

  5. codeforces 166C Median - from lanshui_Yang

    C. Median time limit per test 2 seconds memory limit per test 256 megabytes input standard input out ...

  6. IOS中的各种Picker

    简述 在应用的一些设置中经常要用到一些Picker来快速帮助用户选定取值,一般会用到的有UIDatePicker,UIPickerView以及UIImagePickerController. 初始界面 ...

  7. javascript,css3加载动画

    html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <me ...

  8. SQL Server数据库的操作流程和连接的简单介绍

    学习ADO,免不了要跟数据库打交道,对于初学者来说,如果不整理一下整个流程,那么可能会出现很多的问题,下面简单的介绍数据库的操作流程. 1.     我们最终操作的对像是数据表,在操作数据表之前我们先 ...

  9. 对Lucene PhraseQuery的slop的理解[转载]

    所谓PhraseQuery,就是通过短语来检索,比如我想查“big car”这个短语,那么如果待匹配的document的指定项里包含了"big car"这个短语,这个documen ...

  10. win 下python2.7 pymssql连接ms sqlserver 2000

    python DB-API 连接mysql 要用到库pymssql 下载请到https://pypi.python.org/pypi/pymssql/2.0.1我这里下载的是ms windows in ...