Unable to access web application after containerization

I'm relatively new docker so I'm pretty sure I'm not doing something right. I have a Angular application, with .Net as the back end api. It works fine when I run it using Visual Studio, however it fails when I run it in docker.

Here is my docker file:

# Stage 1: Build the Angular application
FROM node:12.22.12 AS build_node
WORKDIR /frontend
copy . .
RUN npm cache clean --force
RUN rm -rf node_modules
RUN rm package-lock.json

RUN npm install

EXPOSE 4200
CMD ["npm", "start"]

# This stage is used when running from VS in fast mode (Default for Debug configuration)
FROM mcr.microsoft.com/dotnet/aspnet:8.0-noble AS base
USER $APP_UID
WORKDIR /app

# This stage is used to build the service project
FROM mcr.microsoft.com/dotnet/sdk:8.0-noble AS build
ARG BUILD_CONFIGURATION=development
WORKDIR /src
COPY ["ProjectName.csproj", "."]
RUN dotnet restore "./ProjectName.csproj"
COPY . ./
Expose 5000
Expose 5001

CMD ["dotnet", "watch", "run"]


here is my docker-compose.yml file

version: '3.8'

services:
angular:
build:
context: .
dockerfile: Dockerfile
target: build_node
ports:
- "4200:4200"

dotnet:
build:
context: .
dockerfile: Dockerfile
target: build
ports:
- "5000:5000"
- "5001:5001"
depends_on:
- angular


In my terminal when I run: docker-compose up --build there are no errors, and I get the following output:

[+] Running 2/2
✔ Container cbas-angular-1 Recreated 0.1s
✔ Container cbas-dotnet-1 Recreated 0.1s
Attaching to angular-1, dotnet-1
angular-1 |
angular-1 | > angular-spa-web-api@0.0.0 start /frontend
angular-1 | > ng serve --aot --proxy-config proxy.config.js --hmr -e=hmr
angular-1 |
dotnet-1 | dotnet watch ⌚ Polling file watcher is enabled
dotnet-1 | dotnet watch Hot reload enabled. For a list of supported edits, see https://aka.ms/dotnet/hot-reload.
dotnet-1 | Press "Ctrl + R" to restart.
dotnet-1 | dotnet watch Building...
angular-1 | (node:19) [DEP0131] DeprecationWarning: The legacy HTTP parser is deprecated.
angular-1 | NOTICE Hot Module Replacement (HMR) is enabled for the dev server.
angular-1 | The project will still live reload when HMR is enabled,
angular-1 | but to take advantage of HMR additional application code is required
angular-1 | (not included in an Angular CLI project by default).
angular-1 | See https://webpack.js.org/guides/hot-module-replacement
angular-1 | for information on working with HMR for Webpack.
angular-1 | To disable this warning use "ng set warnings.hmrWarning=false"
angular-1 | ** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
angular-1 | [HPM] Proxy created: [ '/api', '/connect' ] -> http://localhost:5000/
dotnet-1 | Determining projects to restore...
dotnet-1 | /src/CBAS.csproj : warning NU1902: Package 'IdentityServer4' 2.0.0 has a known moderate severity vulnerability, https://github.com/advisories/GHSA-55p7-v223-x366 [/src/CBAS.sln]
dotnet-1 | /src/CBAS.csproj : warning NU1902: Package 'IdentityServer4' 2.0.0 has a known moderate severity vulnerability, https://github.com/advisories/GHSA-ff4q-64jc-gx98 [/src/CBAS.sln]
dotnet-1 | All projects are up-to-date for restore.
dotnet-1 | /src/CBAS.csproj : warning NU1902: Package 'IdentityServer4' 2.0.0 has a known moderate severity vulnerability, https://github.com/advisories/GHSA-55p7-v223-x366
dotnet-1 | /src/CBAS.csproj : warning NU1902: Package 'IdentityServer4' 2.0.0 has a known moderate severity vulnerability, https://github.com/advisories/GHSA-ff4q-64jc-gx98
dotnet-1 | CBAS -> /src/bin/Debug/net8.0/CBAS.dll
dotnet-1 | dotnet watch Started
dotnet-1 | Hosting environment: Development
dotnet-1 | Content root path: /src
dotnet-1 | Now listening on: http://0.0.0.0:5000
dotnet-1 | dotnet watch Unable to launch the browser. Navigate to http://0.0.0.0:5000
dotnet-1 | Application started. Press Ctrl+C to shut down.
angular-1 | Date: 2025-02-11T18:54:40.134Z
angular-1 | Hash: bacfc44bc88f3011098c
angular-1 | Time: 21504ms
angular-1 | chunk {account.module} account.module.chunk.js () 228 kB [rendered]
angular-1 | chunk {animal-info.module} animal-info.module.chunk.js () 75.9 kB [rendered]
angular-1 | chunk {cogbytes.module} cogbytes.module.chunk.js () 144 kB [rendered]
angular-1 | chunk {cogbytesEdit.module} cogbytesEdit.module.chunk.js () 109 kB [rendered]
angular-1 | chunk {cogbytesSearch.module} cogbytesSearch.module.chunk.js () 17.2 kB [rendered]
angular-1 | chunk {common} common.chunk.js (common) 153 kB [rendered]
angular-1 | chunk {contact-us.module} contact-us.module.chunk.js () 21.1 kB [rendered]
angular-1 | chunk {dashboard.module} dashboard.module.chunk.js () 120 kB [rendered]
angular-1 | chunk {data-extraction.module} data-extraction.module.chunk.js () 23.6 kB [rendered]
angular-1 | chunk {data-link.module} data-link.module.chunk.js () 20.9 kB [rendered]
angular-1 | chunk {data-visualization.module} data-visualization.module.chunk.js () 21.4 kB [rendered]
angular-1 | chunk {download-ds.module} download-ds.module.chunk.js () 21.5 kB [rendered]
angular-1 | chunk {experiment.module} experiment.module.chunk.js () 899 kB [rendered]
angular-1 | chunk {forms.module} forms.module.chunk.js () 20.5 kB [rendered]
angular-1 | chunk {genomics.module} genomics.module.chunk.js () 22.2 kB [rendered]
angular-1 | chunk {guideline.module} guideline.module.chunk.js () 22.3 kB [rendered]
angular-1 | chunk {guidelineDataLab.module} guidelineDataLab.module.chunk.js () 22.9 kB [rendered]
angular-1 | chunk {inline} inline.bundle.js (inline) 31.1 kB [entry] [rendered]
angular-1 | chunk {main} main.bundle.js (main) 4.28 MB [initial] [rendered]
angular-1 | chunk {manage-user.module} manage-user.module.chunk.js () 67.2 kB [rendered]
angular-1 | chunk {mb-dashboard.module} mb-dashboard.module.chunk.js () 20.9 kB [rendered]
angular-1 | chunk {polyfills} polyfills.bundle.js (polyfills) 1.3 MB [initial] [rendered]
angular-1 | chunk {profile.module} profile.module.chunk.js () 206 kB [rendered]
angular-1 | chunk {pubScreen-dashboard.module} pubScreen-dashboard.module.chunk.js () 39 kB [rendered]
angular-1 | chunk {pubScreen-search.module} pubScreen-search.module.chunk.js () 249 kB [rendered]
angular-1 | chunk {pubScreen.module} pubScreen.module.chunk.js () 21.4 kB [rendered]
angular-1 | chunk {pubScreenEdit.module} pubScreenEdit.module.chunk.js () 85.8 kB [rendered]
angular-1 | chunk {pubScreenQueue.module} pubScreenQueue.module.chunk.js () 71.2 kB [rendered]
angular-1 | chunk {resources.module} resources.module.chunk.js () 30.7 kB [rendered]
angular-1 | chunk {scripts} scripts.bundle.js (scripts) 90 kB [initial] [rendered]
angular-1 | chunk {search-experiment.module} search-experiment.module.chunk.js () 21.6 kB [rendered]
angular-1 | chunk {styles} styles.bundle.js (styles) 523 kB [initial] [rendered]
angular-1 | chunk {taskAnalysis.module} taskAnalysis.module.chunk.js () 51.9 kB [rendered]
angular-1 | chunk {terms.module} terms.module.chunk.js () 21.3 kB [rendered]
angular-1 | chunk {upload.module} upload.module.chunk.js () 92.7 kB [rendered]
angular-1 | chunk {vendor} vendor.bundle.js (vendor) 19.7 MB [initial] [rendered]
angular-1 | chunk {video-tutorial.module} video-tutorial.module.chunk.js () 22 kB [rendered]
angular-1 |
angular-1 | webpack: Compiled successfully.


When I click on the port number I get: "This page isn't working" This is only for development only. Any idea what I could be doing wrong?

Continue reading...