人人都需要知道的@angular-cli

如何查看当前@angular-cli的最新版本?

npm info @angular/cli | grep  'latest'
#output
'dist-tags': { latest: '1.3.0',next: '1.4.0-beta.0' }

上面的: 1.3.0 就是当前@angular-cli的最新版本

我不想安装cnpm能直接安装@angular吗?

npm install -g @angular/cli --registry=http://registry.npm.taobao.org

常用的@angular-cli指令如下:

ng new

查看生成文件结构 (不会直接生成文件)

ng new mobile -d

指定样式类型为scss

ng new mobile --style scss

跳过文件生成完后好包的安装

ng new mobile -si

ng build

默认是开发模式,需要手动配置—prod时才是生产模式

ng build --prod

配置base url

ng build --prod -bh /portal/mobile

配置发布生产的静态资源地址

ng build --prod -bh /portal/mobile -d https://www.cdn.com/mobile

生成sourcemaps

ng build --prod -bh /portal/mobile -d https://www.cdn.com/mobile -sm

快速生成组件,指令,管道,服务,枚举,类,Guard,NgModule,Interface

ng -g component ./components/UserInfoComponent

生成指令
ng -g directive ./directives/CardStateDirective

生成管道
ng -g pipe ./pipes/SafePipe

生成服务
ng -g service ./services/TradeService

生成枚举文件
ng -g enum ./enums/TradeState

生成文件
ng -g class ./interface/User

生成Guard文件
ng -g guard ./guards/LoginGuard

生成NgModule文件
ng -g module ./ShareModule

生成接口文件
ng -g interface ./interface/Message

如何导出@angular-cli的webpack配置呢,如下:

ng new mobile --style scss -si
npm i --registry=https://registry.npm.taobao.org # 如果安装提示失败,进行下一步安装 
npm i

然后验证项目是否可以正常运行
ng serve
如果有编译成功说明项目一切正常

npm eject
完成后会发现.angular-cli.json文件的project小节里面多了,ejected:true

这时会输出如下信息:
==========================================================================================
Ejection was successful.

To run your builds,you now need to do the following commands:
   - "npm run build" to build.
   - "npm test" to run unit tests.
   - "npm start" to serve the app using webpack-dev-server.
   - "npm run e2e" to run protractor.

Running the equivalent CLI commands will result in an error.

==========================================================================================
Some packages were added. Please run "npm install".

同时在项目的根目录下会多出一个文件:webpack.config.js,里面的内容就是当前项目的webpack配置

更新新增加的包
npm install

npm start # 就可以使用webpack-dev-server启动项目

如果有报错,就看下这里:https://github.com/angular/an...

我只碰到提示说,package.json文件内容必须包含pree2e

天之骄子

2017.8.14 星期一 深圳

相关文章

AngularJS 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。出现这个的原因是:由于...
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有...
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内:{{ expres...
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用 CSS 样式为了...
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。读取 JSON 文件下是存储在web服务器上...