如何在代码更改时自动编译Angular 5应用程序

Question

我们有一个AngularJS应用程序，其中包含独立运行的单独的angular应用程序。每个模块都在不同的路径中，例如： localhost:8080/OurMainApplication/angular1Application1 localhost:8080/OurMainApplication/angular1Application2

现在我们将在不同的路径中添加一个基于Angular 5的新模块，例如： localhost:8080/OurMainApplication/angular5Application1

问题是AngularJS具有静态内容，如果我们进行更改并重新部署到服务器，则会自动影响浏览器。但是对于Angular 5应用程序，为了运行它，我们有两个选项：

1. "ng build"以获得dist文件夹（每次进行简单更改时成本过高）

2. "ng serve"（这没问题，但是它在自己的服务器上运行）

是否有任何方法可以仅自动编译我们更改的文件（类似于“ng serve”），以便我可以在开发时将Angular 5编译后的更改重新部署到正在运行的Tomcat服务器中，因为我们的后端服务和Angular应用程序都在同一台服务器上运行，并且不希望引入新服务器来运行我们要引入的新Angular 5应用程序。

在angular-cli或其他技术中是否有自动编译的方式，一旦更新了Angular 5应用程序中的任何文件，就会自动编译？

- RoHaN

---

可能是重复的问题：如何使用angular-cli启用观察模式进行构建？ - Yanis-git

Answer 1

如果您正在使用终端，则在终端中执行以下命令。

ng serve --watch

- AVINASH SHINDE

---

如果你只想要自动编译而不想要服务，例如在构建库时，你可以使用'ng build --watch'。 - M. Schröder

Answer 2

有许多开源插件可用于执行相同的操作。 如果您正在使用VSCode编辑器，可以直接转到扩展程序，搜索并安装名为“Deploy”的工具。 对服务器进行少量配置（主机和端口），即可实现文件的即时部署。

要将文件热部署到服务器中，请执行以下操作：

安装部署扩展，并将以下属性添加到工作区设置中（在文件>首选项>设置下）

{
    "deploy": {
        "packages": [
            {
                "name": "Version 4.0",
               "description": "Files of Trunk",
                "files": [
                    "**/*.js",
                    "**/*.json",
                    "**/*.scss",
                    "**/*.css",
                    "**/*.html"
                ],
               "deployOnSave": true
            }
        ],
        "targets": [
            {
                "type": "local",
                "name": "My local folder",
                "description": "A local folder",

                "dir": "C:/<your_installation_location_directory>"
            }
        ]
    }
}

注意：目标目录应该是您本地的特定目录。

- Padmapriya Vishnuvardhan