Angular_构建&部署&多环境

构建

构建：编译和合并
部署：与服务器整合

ng build

使用命令ng build进行构建

构建完成以后，会在项目中多出一个dist文件夹

部署

在服务器端新建一个文件夹client，将dist文件夹中的文件复制粘贴到cleint文件夹当中

这个过程就叫部署

修改auction_server.js

新增代码var path = require("path");将app.get('/', function (req, res) {
res.send("Hello Express");
}); 替换成app.use('/',express.static(path.join(__dirname,'..','client')));

然后

nodemon build/auction_server.js

再访问http://localhost:8000/ 就会自动跳转client的index页面

但是当点击进详情页的时候，再刷新浏览器，就会报错

修改客户端app.module.ts文件

 providers: [ProductService,WebSocketService,
        {provide:LocationStrategy,useClass:HashLocationStrategy}],

再执行

ng build

再将新生成的dist文件复制到服务器端，将原有的文件全部覆盖

再刷新http://localhost:8000我们发现会变成这样http://localhost:8000/#/
此时就可以解决上面的问题。

这样，部署就完毕了。

多环境

Angular会有环境配置文件，开发环境，生产环境，线上环境，测试环境等等

我们在main.ts文件中，已经在使用了

默认是在开发者模式中

我们修改到生产环境中，修改package.json

"start": "ng serve --prod --proxy-config proxy.conf.json",

同样bulid也可使用

ng build –prod

客户端代码参考

服务端代码参考