Angular 5代码变更自动编译方法及AngularJS集成Angular5模块部署问题

老兄，针对你这种主应用下混合运行AngularJS和Angular 5子应用的场景，实现Angular 5代码变更时自动编译其实很顺手——Angular CLI本身就提供了对应的能力，下面给你分步骤讲清楚：

1. 先确认项目用Angular CLI管理 #

首先得确保你的Angular 5项目是基于Angular CLI搭建的（如果之前不是，建议迁移到CLI，后续维护、编译都省心太多）。如果已经是CLI项目，直接用它的热重载功能就行。

2. 用ng serve --watch实现开发时自动编译+刷新 #

在你的Angular 5项目根目录下，敲这个命令：

ng serve --watch

它会启动一个本地开发服务器，同时实时盯着你的代码文件——不管你改了组件、服务、模板还是样式，只要保存，CLI会自动重新编译项目，而且浏览器会自动刷新页面展示最新效果，完全不用手动触发编译。

不过要适配你主应用的路径（/OurMainApplication/angular5Application1），得加个基础路径参数：

ng serve --watch --base-href /OurMainApplication/angular5Application1/

这样开发服务器会把应用的根路径设成你生产环境需要的子路径，开发时就能直接模拟真实访问路径，避免后续部署踩坑。

3. 代理主应用请求（可选，解决跨域/路径匹配问题） #

如果你的主应用是部署在localhost:8080的静态服务，你可以给Angular开发服务器加个代理配置，避免开发时的跨域或者路径不匹配问题。

在Angular项目根目录新建proxy.conf.json文件，内容写：

{
  "/OurMainApplication/*": {
    "target": "http://localhost:8080",
    "secure": false,
    "changeOrigin": true
  }
}

然后启动开发服务器时带上代理配置：

ng serve --watch --base-href /OurMainApplication/angular5Application1/ --proxy-config proxy.conf.json

这样你访问http://localhost:4200/OurMainApplication/angular5Application1时，请求会被代理到主应用的服务器上，同时代码变更依然会自动编译刷新，完美模拟生产环境的访问逻辑。

4. 生产环境的自动编译+部署（如果要持续交付） #

如果你们需要代码提交后自动编译部署到服务器，可以结合CI/CD工具（比如Jenkins、GitLab CI这些）：

• 在CI脚本里执行ng build --prod --base-href /OurMainApplication/angular5Application1/，这个命令会编译生产环境的优化代码，输出到项目的dist目录
• 然后把dist目录里的所有文件同步到服务器的OurMainApplication/angular5Application1路径下
• 把CI的触发条件设为代码提交到指定分支，这样每次代码变更，CI都会自动完成编译+部署，完全不用手动操作

内容的提问来源于stack exchange，提问作者RoHaN