Setting up `ng serve` to detect changes in a containerized Angular 2 application

Question

Setting up `ng serve` to detect changes in a containerized Angular 2 application

Currently, I am 'dockerizing' an existing Angular 2 application that is being run on angular-cli version 1.0.0-beta.31.

I am facing difficulties in configuring ng serve to automatically reload my app whenever a file in the working directory is updated. As of now, I have to manually run docker-compose up --build every time I make changes...

UPDATE: I am considering using a volume for this purpose.

The following is my Dockerfile:

# Dockerizing Angular 2 Client App
# @link: https://scotch.io/tutorials/create-a-mean-app-with-angular-2-and-docker-compose

# Using official Node 7 dockerhub image as base
FROM node:7

# Creating a directory for the app
RUN mkdir -p /usr/src/app

# Changing directory to execute commands within it
WORKDIR /usr/src/app

# Copying dependency definitions
COPY package.json /usr/src/app

# Installing dependencies
RUN npm install

# Commented out code to set-up a volume
# COPY . /usr/src/app

# Exposing the port on which the app runs
EXPOSE 4200

# Running the app
CMD ["npm", "start"]

Below is my docker-compose.yml configuration:

# Specifying docker-compose version
version: '2'

# Defining services/containers to be executed
services:
  angular2app:
    build: ./
    ports:
      - "4200:4200"
    # Adding volume here
    volumes:
      - .:/usr/src/app

UPDATE: The app successfully builds and runs without the volume. However, when the volume is added, the following error is encountered:

Building angular2app
Step 1/7 : FROM node:7
 ---> b3a95b94bd6c
Step 2/7 : RUN mkdir -p /usr/src/app
 ---> Using cache
 ---> 2afb01ffe055
Step 3/7 : WORKDIR /usr/src/app
 ---> Using cache
 ---> 44d08fdb4a19
Step 4/7 : COPY package.json /usr/src/app
 ---> Using cache
 ---> 87bb4f71c13c
Step 5/7 : RUN npm install
 ---> Using cache
 ---> ba88a0e1e480
Step 6/7 : EXPOSE 4200
 ---> Using cache
 ---> 4fddacae8486
Step 7/7 : CMD npm start
 ---> Using cache
 ---> c5ac29bf85fc
Successfully built c5ac29bf85fc
Creating minterface_angular2app_1

ERROR: for angular2app  Cannot start service angular2app: Mounts denied: closed
ERROR: Encountered errors while bringing up the project.

How can I configure ng serve to detect changes in my current working directory and rebuild my Angular 2 app?

PS: I am using Docker for Mac with docker-compose version 1.11.1 on Mac running Sierra 10.12.3.

angular docker docker-compose angular-cli

Answer 1

Answer №1

Dealing with a comparable problem was challenging for me. My issue stemmed from Webpack not properly monitoring changes in the codebase. For further information, refer to https://webpack.js.org/configuration/watch/

To address this issue within webpack.common.js, consider incorporating the following snippet:

watchOptions: {
   poll: 1000, // denotes a polling interval measured in milliseconds
},

Answer 2

Dealing with a comparable problem was challenging for me. My issue stemmed from Webpack not properly monitoring changes in the codebase. For further information, refer to https://webpack.js.org/configuration/watch/

To address this issue within webpack.common.js, consider incorporating the following snippet:

watchOptions: {
   poll: 1000, // denotes a polling interval measured in milliseconds
},

Answer 3

Answer №2

If you're looking to manage node processes efficiently, consider using the supervisor npm package available at this link. By simply running the process with this supervisor tool and specifying the folders to watch for changes with the -w flag, you can ensure smooth operation.

I trust this solution will serve your needs effectively!

Answer 4

If you're looking to manage node processes efficiently, consider using the supervisor npm package available at this link. By simply running the process with this supervisor tool and specifying the folders to watch for changes with the -w flag, you can ensure smooth operation.

I trust this solution will serve your needs effectively!

Answer 5

Answer №3

We have a unique approach to solving this problem in our development workflow that may differ from what you're expecting:

Avoid running ng serve in docker. Instead, run it on your host machine to prevent issues with file sharing in Docker. There are known problems with file changes on the host not propagating to the Docker VM.
Implement a reverse proxy in your docker-compose setup to route requests to both your backend and Angular project. You probably already have this configured.
```
web:
  image: nginx
  ports:
    - "80:80"
  links:
    - backend
  extra_hosts:
    - "frontend:192.168.99.1"
```
Instead of linking to frontend, we specify extra_hosts to direct to our host's IP address.
Add the host's IP address to the lo0 interface so that it can be accessed from inside the Docker VM.
```
sudo ifconfig lo0 inet 192.168.99.1/32 add
```
Remember that this setting does not persist after a restart, so you'll need to do this again as needed.

Be sure to select a suitable IP address to prevent conflicts with your local network or any VPN software you might be using.

We hope these suggestions prove useful for you.

Answer 6

We have a unique approach to solving this problem in our development workflow that may differ from what you're expecting:

Avoid running ng serve in docker. Instead, run it on your host machine to prevent issues with file sharing in Docker. There are known problems with file changes on the host not propagating to the Docker VM.
Implement a reverse proxy in your docker-compose setup to route requests to both your backend and Angular project. You probably already have this configured.
```
web:
  image: nginx
  ports:
    - "80:80"
  links:
    - backend
  extra_hosts:
    - "frontend:192.168.99.1"
```
Instead of linking to frontend, we specify extra_hosts to direct to our host's IP address.
Add the host's IP address to the lo0 interface so that it can be accessed from inside the Docker VM.
```
sudo ifconfig lo0 inet 192.168.99.1/32 add
```
Remember that this setting does not persist after a restart, so you'll need to do this again as needed.

Be sure to select a suitable IP address to prevent conflicts with your local network or any VPN software you might be using.

We hope these suggestions prove useful for you.

Setting up `ng serve` to detect changes in a containerized Angular 2 application

Answer №1

Answer №2

Answer №3

Similar questions

How can you retrieve data in Angular through an API call using the get method?

What are the steps to utilize kendo-fileselect in order to upload files from an Angular application to a C# web API?

Prevent IonContent from scrolling to the bottom or top when using Ionic framework

Guide on displaying tooltip messages for a custom directive in Visual Studio Code

Converting milliseconds into days, hours, minutes, and seconds using Angular

Encountering a 'ng serve' error while trying to include a new SCSS style in an

Filter through the array of objects using the title key

Zero's JSON Journey

The outcome of the .then function is not defined following another .then function

Encountering a problem while trying to incorporate Mapbox GL JS into an Angular 8 web application

I am looking to update my table once I have closed the modal in Angular

Encountering issues with obtaining tokens silently using Angular and Microsoft MSAL, resulting in errors AADB2C90077 and AADB2C90205

What could be the reason my mat-form-field is not displaying the label?

When you call Subscribe(), you will receive the output "complete: () => void; 'complete' is defined in this context. What exactly does this signify?

The performance of the NextJs app API is unpredictable when deployed on Vercel

Nested ControlGroup in Angular2's ControlArray

What purpose does the # symbol serve in Angular when interpolating values?

Angular - calculate the total of numerical values within a nested *ngFor loop

No updates found (Angular)

Tips for streamlining interface initialization and adding items to it