Angular4 从创建到发布生产环境

Angular4 @angular/cli

开发环境

Mac + WebStorm

生产环境

Ubuntu + Nginx

必备条件：

Node.js 6.9.x以上

npm 3.x.x以上

安装

<code>npm install -g @angular/cli</code>

创建项目

<code>ng new my-app</code>

启动

测试项目

浏览器访问Url即可

<code>http://localhost:4200</code>

angular4可以使用多种方式编译发布：

tsc

aot

webpack2

tsc是angular默认的发布方式，这种方式会将所有文件打包、压缩、混淆，但打包出来的文件仍然很大，因为这个打包将很多没有用到的库文件也一起打包了。

预AoT编译是angular提供的另外一套编译方式。可以配合Tree Shaking工具进行代码的精简、压缩、混淆。

<a href="https://link.jianshu.com?t=https://angular.cn/docs/ts/latest/cookbook/aot-compiler.html#!%23overview" target="_blank">预AoT编译官方教程</a>

使用<code>ng build --prod</code>编译发布后，项目中的dist文件夹就是发布编译好的生产文件。

dist文件夹中只包含一个index.html文件、一些JS文件和assert文件夹。原因是angular已经将所有的组件编译到了main.js文件中，包括html、css。实际上这时我们就可以把这个dist文件放到任何服务器中使用了。

安装好nginx之后，打开nginx的站点配置文件

找到server节点下的下面这些内容

将内容修改为

重启并访问服务器的地址。