Angular特训（一）脚手架详解

介绍

        众所周知，在一般web框架开发中，脚手架一直是作为较为重要的一趴，各个框架也都有基于自己框架的脚手架版本，而Angular官方所提供脚手架（@angular-cli）则极为强大，可以说真正的超过了一般的脚手架含义。

安装

        cnpm i -g @angular/cli

        国内用户可以选择阿里的cnpm或者fb的yarn去下载，个人推荐用yarn下载依赖， 因为yarn虽然下载的时间较久，但不得不说，yarn下载下来的资源出问题的概率很小（yarn global add @angular/clis）。

初始化项目

        常见的命令行操作

            1. ng new --routing --prefix=zkl 

            新建一个angular项目，模版中新建了路由文件并且之后生成的组件都会以zkl为前缀

           2. ng g c/d/p/m/s/a

            新建一个 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，这是为了防止打包是的内存溢出。