ng-cli
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
ng-cli的更多相关文章
- ng/cli uses yarn as the package manager
Switch to working directory Excuting the following command ng config cli.packageManager yarn
- angular 2 - 001 ng cli的安装和使用
angular cli 创建项目和组件 ng new my-app --skip-install cd my-app cnpm install ng serve localhost:4200 angu ...
- ng/cli new skip install and do not create a folder
ng new myApp --skip-install --directory ./
- 新建ng工程
有问题多看官网文档https://www.angular.cn/guide/quickstart 1 在远程仓库建立 1个完全空的仓库,不要建立readme.MD ng cli创建时会创建readm ...
- 记录项目版本升级angular4 ~ angular5
前言: 在上一篇ng4文章<angular4--实际项目搭建总结>中说过,等到ng5正式发布,并且蚂蚁的NG ZORRO兼容ng5之后,我会对ng4项目进行升级.这篇文章就是大概说下升级的 ...
- .Net Core应用框架Util介绍(三)
上篇介绍了Util的开发环境,并让你把Demo运行起来.本文将介绍该Demo的前端Angular运行机制以及目录结构. 目录结构 在VS上打开Util Demo,会看见如下的目录结构. 现代前端通常采 ...
- 【asp.net core mvc + angular6实战】 - 1. 环境搭建
为什么打算写这些文章? 没有为什么,只是为了学习Angular和更了解.Net Core等技术 需要用到的技术? 后端使用.Net Core 2.1 + EF Core 2.1 + Mysql 5.7 ...
- angular schametics 使用记录
什么是 schametics Schematics是Angular团队发布的一个代码生成工具.它提供了API,可以操作文件并在Angular项目中添加新的依赖项,ng cli 创建模板就是用它. 它也 ...
- 大厂是如何用DevCloud流水线实现自动化部署Web应用的?
DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师. 官方网站:devui.design Ng组件库:ng-devui(欢 ...
- 如何解决异步接口请求快慢不均导致的数据错误问题? - DevUI
DevUI 是一款面向企业中后台产品的开源前端解决方案,它倡导沉浸.灵活.至简的设计价值观,提倡设计者为真实的需求服务,为多数人的设计,拒绝哗众取宠.取悦眼球的设计.如果你正在开发 ToB 的工具类产 ...
随机推荐
- hdu 5429 Geometric Progression(存个大数模板)
Problem Description Determine whether a sequence is a Geometric progression or not. In mathematics, ...
- ecshop 管理员不需要旧密码
- Angular学习笔记(2)——TODO小应用
Angular学习笔记(2)--TODO小应用 1. 写在前面 之前我们跑了Angular的Hello World,你是不是对它有点感觉了呢?这一篇将结合一个TODO程序来继续学习Angular的用法 ...
- python高级编程之选择好名称:完
由于时间关系,python高级编程不在放在这边进行学习了,如果需要的朋友可以看下面的网盘进行下载 # # -*- coding: utf-8 -*- # # python:2.x # __author ...
- codeforces 166C Median - from lanshui_Yang
C. Median time limit per test 2 seconds memory limit per test 256 megabytes input standard input out ...
- IOS中的各种Picker
简述 在应用的一些设置中经常要用到一些Picker来快速帮助用户选定取值,一般会用到的有UIDatePicker,UIPickerView以及UIImagePickerController. 初始界面 ...
- javascript,css3加载动画
html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <me ...
- SQL Server数据库的操作流程和连接的简单介绍
学习ADO,免不了要跟数据库打交道,对于初学者来说,如果不整理一下整个流程,那么可能会出现很多的问题,下面简单的介绍数据库的操作流程. 1. 我们最终操作的对像是数据表,在操作数据表之前我们先 ...
- 对Lucene PhraseQuery的slop的理解[转载]
所谓PhraseQuery,就是通过短语来检索,比如我想查“big car”这个短语,那么如果待匹配的document的指定项里包含了"big car"这个短语,这个documen ...
- win 下python2.7 pymssql连接ms sqlserver 2000
python DB-API 连接mysql 要用到库pymssql 下载请到https://pypi.python.org/pypi/pymssql/2.0.1我这里下载的是ms windows in ...