ng-cli

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
时间: 2024-08-15 16:23:20

ng-cli的相关文章

angular2 cli 无法正确安装使用解决

最近开始学习使用ng2在项目里面, 然后按照指南一步一步做, 在安装 ng cli 的时候各种报错, 折腾一上午之后, 终于顺利运行. 后面总结发现其实都是在浪费时间.安装的整个过程, 基本是遇到一个报错就去google然后解决, 解决完了就是一个新的报错, 痛苦不堪. 下面大致的记录一些报错和解决方案( 其实都是在浪费时间, 解决问题请直接看下面的总结 ): error TS2304: Cannot find name '_' http://stackoverflow.com/question

记录项目版本升级angular4 ~ angular5

前言: 在上一篇ng4文章<angular4--实际项目搭建总结>中说过,等到ng5正式发布,并且蚂蚁的NG ZORRO兼容ng5之后,我会对ng4项目进行升级.这篇文章就是大概说下升级的折腾过程吧.下面结语中有最佳实践,整个过程中有自己挖的坑,可以选择忽略,直接看结语. 升级(折腾)过程: ①ng5更新: 访问这个链接是ng的升级导向 https://angular-update-guide.firebaseapp.com/ ,内容如下图(看起来还是很简单的): 复制了导向上的命令,安装的时

高版本的angular cli(2以上)如何使用ng eject

在creact react中有eject来暴露出配置文件,但是在angular cli中却只有1.X版本的cli有这个功能 https://github.com/angular/angular-cli/wiki/1-x-home 2版本以上都没有了 https://github.com/angular/angular-cli/wiki (真的坑...官方也不会给个第三方的库么?) 那么如果是高版本的cli应该如何使用eject这个功能呢,有个第三方的库 https://www.npmjs.com

.Net Core + Angular Cli 开发环境搭建

一.基础环境配置 1.安装VS 2017 v15.3或以上版本 2.安装VS Code最新版本 3.安装Node.js v6.9以上版本 4.重置全局npm源,修正为 淘宝的 NPM 镜像: npm install -g cnpm --registry=https://registry.npm.taobao.org 5.安装TypeScript cnpm install -g typescript typings 6.安装 AngularJS CLI cnpm install -g @angul

使用Angular CLI创建Angular 2项目

一.安装nvm-windows,方便node版本切换 nvm list //查看已安装的版本 nvm install 6.11.0 //安装Node.js 6.11.0,因为@angular/cli需要6.9版本以上支持 nvm use 6.11.0 //切换到新安装的版本 二.为npm配置proxy(proxy软件需自行安装) npm config set proxy=http://localhost:1080 npm config set https-proxy=http://localho

ng 依赖注入

将依赖的对象注入到当前对象,直接去使用依赖的对象即可. 降低耦合度.提高开发速度.. 文件压缩:yui-compressor有两种方案:①CLI(command line interface)java -jar **.jar **.js > **.min.js②webStormfile->settings->tools-->fileWatchers->点击+ ->选中yui compressor js-->设置program(点击按钮在弹窗中选中C盘根目录下的js

angular cli

1. 安装cnpm: npm install -g cnpm --registry=https://registry.npm.taobao.org 2. 安装angular/cli: cnpm install -g @angular/cli 3. 创建一个示例程序 ng new my-app --skip-install cd my-app cnpm install ng serve

使用ng serve 在Vs Code里调试 anguar 项目

ng serve 是@angular/cli 下的运行命令 我们可以通过下载@angular/cli来生成angular2的模板 npm install -g @angular/cli ng new Anguar-Example --默认会下载依赖包 cd Angura-Example npm install --如果下载了依赖包这步可以不做 ng serve --运行angular 或 npm start 运行项目 默认通过http://localhost:4200/ 访问. 如果我们想用VS

执行ng build --prod --aot命令报错

D:\git\**\src\main\iui>ng build --prod --aotHash: 257ab60feca43633b6f7Time: 25358mschunk {0} polyfills.221420fde500aaed5079.bundle.js (polyfills) 184 kB {5} [initial] [rendered]chunk {1} scripts.92391f7b3a5602225e85.bundle.js (scripts) 185 kB {5} [in

Angular CLI 安装

安装Angular 官网的教程,因为国内网络环境原因,访问不了服务器,导致安装失败. 1.先安装NodeJs 安装教程:http://blog.csdn.net/zengmingen/article/details/72650484 2.通过NodeJs中的模块npm 命令行安装 CLI 2.1.设置npm的资源库为国内淘宝的. 命令: [plain] view plain copy npm config set registry https://registry.npm.taobao.org