人人都需要知道的@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 星期一 深圳

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!