Angular构建和部署

一.构建：编译和合并

1.什么是构建

• 将编写的typescript源码变成能够直接放到web服务器上的静态资源
• 构建包括：编译（将typescript编译成JavaScript）和合并（将全部资源整合到一块儿，减小应用启动时发送http请求的数量，加快启动速度）
• 虽然typescript提供了编译器能够在运行时实时在浏览器中编译，可是若是在生产环境中这样作的话，生产环境须要额外加载一个typescript编译器；每次执行代码以前都要先执行编译。这两个事情执行后会致使性能降低，故将代码部署到服务器以前咱们须要在线下把代码编译好，只部署JavaScript代码。

2.如何构建

• 执行ng build命令进行构建
• 当前项目目录中会多出dist文件，其中包含构建以后的文件

二.部署：与服务器整合

1.什么是部署

• 将构建后生成文件与服务器放到一块儿

2.将项目部署到node服务器上

• 部分代码

  import * as path from 'path';
  app.use('/'.express.static(path.join(__dirname,'..','client')));//当访问根目录时访问上一级的client中的index.html文件

• 遇到问题

  • 当访问localhost:8080进入程序再点击页面内容路由到另外一个地址如localhost:8080/product后，刷新页面提示没法找到对应地址
    • 问题出现缘由：刷新后浏览器不知道是路由过去的仍是请求的对应地址，默认是当请求的地址去处理
    • 问题解决方案：添加对应的HashLocationStrategy的token provider，路由的地址都会携带#

  //在app.module.ts中添加provide
  providers:[{provide:LocationStrategy,useClass:HashLocationStrategy}]路由url地址后有
  //每次刷新的时候也都携带#

三.多环境：一套代码支持多种环境

1.开发的流程

• 开发环境：进行开发
• 测试环境：进行测试
• 生产环境：实际运行

2.环境文件

• 在angular-cli.json中的environments属性定义了当前都有哪些环境和对应环境的配置信息，若有须要能够自行添加（环境文件中的属性必须同样）

• 在代码中使用环境对象

  • 在main.ts中已经使用了系统定义的属性production，代码以下

    if(environment.production) {//判断环境中production的值，决定是否启用对应的模式
        enableProdMode();
    }

  • 咱们开发时使用的都是开发环境(默认)，若是咱们想自行切换到生产环境查看对应的效果，则须要修改package.json中scripts属性对象的start属性值【添加:--env=prod参数】"start":"ng serve --env=prod --proxy-config proxy.conf.json"