环境简介
- Angular4 @angular/cli
- 开发环境
Mac + WebStorm - 生产环境
Ubuntu + Nginx
使用 @angular/cli创建angular4项目
- 必备条件：
- Node.js 6.9.x以上
- npm 3.x.x以上
- 安装
npm install -g @angular/cli - 创建项目
ng new my-app - 启动
cd my-app ng serve --open #--open 自动打开浏览器，不是必须 - 测试项目
浏览器访问Url即可
http://localhost:4200
发布
angular4可以使用多种方式编译发布：
- tsc
- aot
- webpack2
tsc
tsc是angular默认的发布方式，这种方式会将所有文件打包、压缩、混淆，但打包出来的文件仍然很大，因为这个打包将很多没有用到的库文件也一起打包了。
#使用angular/cli自带的tsc打包
cd my-app
ng build #编译并打包
ng build --prod #编译并打包、混淆为生产环境
npm run build #与上面同理
npm run build --prod #与上面同理
AoT
预AoT编译是angular提供的另外一套编译方式。可以配合Tree Shaking工具进行代码的精简、压缩、混淆。
预AoT编译官方教程
部署到Ubuntu Nginx
使用ng build --prod编译发布后，项目中的dist文件夹就是发布编译好的生产文件。
dist文件夹中只包含一个index.html文件、一些JS文件和assert文件夹。原因是angular已经将所有的组件编译到了main.js文件中，包括html、css。实际上这时我们就可以把这个dist文件放到任何服务器中使用了。
Nginx
安装好nginx之后，打开nginx的站点配置文件
vim /etc/nginx/sites-available/default
找到server节点下的下面这些内容
server{
root /var/www/html;
# Add index.php to the list if you are using PHP
index index.html index.htm index.nginx-debian.html;
server_name _;
location / {
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
try_files $uri $uri/ =404;
}
}
将内容修改为
server{
root /var/www/dist; # dist文件夹为之前编译并打包的文件夹
# Add index.php to the list if you are using PHP
index index.html index.htm index.nginx-debian.html; # 这里定义的是nginx默认首页
server_name _;
location / {
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
try_files $uri $uri/ /index.html; #因为angular将所有的组件全部打包到了js里面，只留了一个index.html，所以只需要将所有的http请求指向index.html即可
}
}
重启并访问服务器的地址。
