Angular_构建&部署&多环境

构建

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

ng build

使用命令ng build进行构建

Angular_构建&部署&多环境_第1张图片

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

Angular_构建&部署&多环境_第2张图片

部署

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

Angular_构建&部署&多环境_第3张图片

这个过程就叫部署

修改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/ 就会自动跳转clientindex页面

Angular_构建&部署&多环境_第4张图片

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

Angular_构建&部署&多环境_第5张图片

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

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

再执行

ng build

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

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

Angular_构建&部署&多环境_第6张图片

这样,部署就完毕了。

多环境

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

Angular_构建&部署&多环境_第7张图片

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

Angular_构建&部署&多环境_第8张图片

默认是在开发者模式中

Angular_构建&部署&多环境_第9张图片

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

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

Angular_构建&部署&多环境_第10张图片

Angular_构建&部署&多环境_第11张图片

Angular_构建&部署&多环境_第12张图片

同样bulid也可使用

ng build –prod

客户端代码参考

服务端代码参考

你可能感兴趣的:(前端)