介绍
众所周知,在一般web框架开发中,脚手架一直是作为较为重要的一趴,各个框架也都有基于自己框架的脚手架版本,而Angular官方所提供脚手架(@angular-cli)则极为强大,可以说真正的超过了一般的脚手架含义。
安装
cnpm i -g @angular/cli
国内用户可以选择阿里的cnpm或者fb的yarn去下载,个人推荐用yarn下载依赖, 因为yarn虽然下载的时间较久,但不得不说,yarn下载下来的资源出问题的概率很小(yarn global add @angular/clis)。
初始化项目
常见的命令行操作
1. ng new <project-name> --routing --prefix=zkl
新建一个angular项目,模版中新建了路由文件并且之后生成的组件都会以zkl为前缀
2. ng g c/d/p/m/s/a <name>
新建一个 Component/Directive/Pipe/Module/Service/Auth, name为自定义名称,值得注意的是新建一个module的时候可以加上 --routing,则会生成对应的路由文件
3. ng serve --open --port 0000 --host 0.0.0.0 --config proxy.config.json
在新建项目之后ng serve为项目启动命令,--open会打开默认浏览器,--port 指定端口,默认端口为4200,--config 为指定一个proxy的配置文件,稍后有章节会详细解释,值得注意的是--host命令,默认的ng serve 启动的项目只可以用localhost访问,同局域网的机器无法通过ip访问,加上--host 0.0.0.0 则可以正常访问
4. ng config jsonPath value --global --help
该命令是用来切换默认的包管理器的,在ng6之前的版本中是用ng set , 在ng7中用ng config,全量的命令名称为:ng config cli.packageManager cnpm||yarn --global
5. ng build --prod --output-path xxx --base-href xxx
该命令是用来打包编译的,--prod是angular自定义的一种生产模式打包,它包括了对代码的压缩混淆以及会检测代码的严谨性,碰到问题直接抛出。--output-path则是改变输出文件夹的名称,默认为dist, --base-href则是改变输出文件夹内index.html中base标签的href属性,默认为/,当我们的应用需要部署在某个二级目录下时需要修改该参数
6. node --max_old_space_size=8195 node_modules/@angular/cli/bin/ng build
该命令部署angular 脚手架范围,他属于node范围,它的含义是编译时将可用内存扩展到8G,这是为了防止打包是的内存溢出。