Angular构建和部署

版权声明：作者已开启版权声明，如转载请注明转载地址。 https://blog.csdn.net/qq_34829447/article/details/83213494

一.构建：编译和合并

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"