How to auto compile angular 5 application when there are any code changes presented

Question

We have a AngularJS application that contains separate angular applications that run independently. each module is in a separate path like

localhost:8080/OurMainApplication/angular1Application1 localhost:8080/OurMainApplication/angular1Application2

Now we are going to add a new module in Angular 5 that is in a different path like lets say

localhost:8080/OurMainApplication/angular5Application1

so thing is that AngularJS has static content that if we do a change and redeploy into server it will get automatically affected in the browser. but for the angular 5 application in order to run it we need we have 2 options

"ng build" to have dist folder (too expensive to do every time we do a simple change)
"ng serve" (this is okay but its running in its own server)

Is there any way to auto compile ONLY the files we change (like "ng serve") so that I can redeploy the angular 5 compiled changes into the running tomcat server (when we are developing) because our back-end service and angular application both are running in the same server and don't want a new server to run the new angular 5 application that we are going to introduce.

Are there ways in angular-cli or some other technique to auto compile once any of the files in angular 5 application gets updated

Possible duplicat of [How do I build with watch enabled using angular-cli?](https://stackoverflow.com/questions/40224607/how-do-i-build-with-watch-enabled-using-angular-cli) — Yanis-git, May 07 '18 at 11:41

score 8 · Answer 1 · answered Dec 16 '18 at 13:06

8

if you are using terminal then fire the following command in terminal

ng serve --watch

answered Dec 16 '18 at 13:06

AVINASH SHINDE

81
1
2

In case you only want to auto compile and not serve e.g. when building a lib you may want to use 'ng build --watch' – M. Schröder Aug 28 '22 at 12:15

score 0 · Answer 2 · answered May 07 '18 at 11:42

There are many open source plugins available to do the same. If you are using VSCode editor, you can simply go to the extension, search and install tools like "Deploy". Few configuration to the server (host and port), will deploy the files on the fly.

To hot deploy the files into the server,

Install the extension deploy and add the following property to the workspace settings (under file > preferences > settings)

{
    "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>"
            }
        ]
    }
}

Note: the target directory should be your local specific

How to auto compile angular 5 application when there are any code changes presented

2 Answers2