Debugging Angular application in Azure Dev Spaces and VS Code Debugging Angular application in Azure Dev Spaces and VS Code kubernetes kubernetes

Debugging Angular application in Azure Dev Spaces and VS Code


I see at least one issue with your current Dev env setup. Your launch.json configuration settings does not seem to match DevSpace release values.

In your Dockerfile you are exposing following ports:

Step 8/9 : EXPOSE 4200 49153

whereas by default azds prep --global creates for you a Kubernetes deployment template file, which is telling other systems, that your container exposes port 80, so please check the following file and adjust it accordingly:

(./charts/---app_name---/templates/deployment.yaml):

   spec:      containers:        - name: {{ .Chart.Name }}          image: "{{ .Values.image.repository }}:{{ .Values.image.tag }}"          imagePullPolicy: {{ .Values.image.pullPolicy }}          ports:            - name: http              containerPort: 80              protocol: TCP

Because of it you can`t create a tunneled connection (["args": ["up", "--port=54783:80", "--keep-alive"]) to the Angular POD, backed by K8S service on port 80 and Ingress (service port can be adjusted in values.yaml file).

I did adjustments of ng server port in my Angluar project to make it working with Dev Space out-of-the-box, and to avoid messing up later on with output artifacts (helm chart) of azds prep command:

 -- package.json  --{  "name": "webfrontend",  "version": "0.0.0",  "scripts": {    "ng": "ng",    "start": "ng serve --port 80",    "build": "ng build",    "test": "ng test",    "lint": "ng lint",    "e2e": "ng e2e"  },

And here is the output of my docker build inside Dev Space:

Waiting for container image build...4sBuilding container image...Step 1/8 : FROM node:ltsStep 2/8 : ENV PORT 80Step 3/8 : EXPOSE 80Step 4/8 : WORKDIR /appStep 5/8 : COPY package.json .Step 6/8 : RUN npm installStep 7/8 : COPY . .Step 8/8 : CMD ["npm", "start"]Built container image in 6sWaiting for container...10sService 'webfrontend' port 'http' is available at http://angular-dev.webfrontend.xxxyyyzzz.yyy.azds.io/Service 'webfrontend' port 80 'http' is available at http://localhost:53097