Angular: ng-serve ignoring certificates

Question

I want to serve an Angular application over HTTPS using ng-serve --host 0.0.0.0. My project uses Angular CLI 1.2.

Angular is not recognising the certificates I provide, and creating its own. The certificates I want to use are .pem files.

Enabling the --ssl flag correctly serves using HTTPS. If I disable it, it goes back to HTTP, so this flag works.

I'm working in a Docker container. I pass the certificates in as a volume in the compose file, and they are where expected in the container when I check with docker exec -i <id> bash.

Everything works as expected if I ignore the invalid certificate error, both client side and server side. The problem I am trying to solve is getting ng-serve to use my certificates.

Here's what I've done:

1. ng-serve --ssl true --ssl-cert <path-to-cert> --ssl-key <path-to-key> and variations e.g. absolute/relative path.

2. Setting the above flags in the package.json file.

3. Setting my .angular-cli.json defaults:

   {
     ... 
     "defaults": {
       ...
       "serve": {
         "sslKey": "<relative-path>",
         "sslCert": "<relative-path>"
       },
       ...
     },
     ...
   }
   

I have tried the answers:

Get angular-cli to ng serve over HTTPS

Run Angular Cli Ng Serve over https 2018

The steps in this article also did not work: https://medium.com/@rubenvermeulen/running-angular-cli-over-https-with-a-trusted-certificate-4a0d5f92747a

Answer 1

You shouldn't be using ng serve in a production Docker container because it invokes a development HTTP server, not secure at all, just meant to test the app locally. That's why the command ng serve --prod triggers the following warning:

**************************************************************************************** 
This is a simple server for use in testing or debugging Angular applications locally. It hasn't been reviewed for security issues.

DON'T USE IT FOR PRODUCTION!
****************************************************************************************

I'll give you an example of a Dockerfile wrapping an Angular app with a Nginx HTTP server (one of the two most widely used servers):

FROM node:10.13.0-stretch as build-stage
WORKDIR /app
COPY package*.json /app/
RUN npm install
RUN npm install -g --unsafe-perm @angular/cli@latest
COPY ./ /app/
ARG configuration=production
RUN ng build --prod --build-optimizer=true --aot=true --output-hashing=all --extract-css=true --named-chunks=false --vendor-chunk=true

FROM nginx:1.14.1

# Add application files
COPY --from=build-stage /app/dist/name-of-your-app/ /var/www/html
COPY --from=build-stage /app/nginx/nginx.conf /etc/nginx/nginx.conf 
COPY --from=build-stage /app/nginx/site.conf /etc/nginx/conf.d/default.conf 

RUN touch /var/run/nginx.pid && \
    chown -R www-data: /etc/nginx/ && \
    chown -R www-data: /var/run/nginx.pid && \
    chown -R www-data: /var/cache/nginx && \
    chown -R www-data: /var/www/html

USER www-data

#Expose the port
EXPOSE 8080

STOPSIGNAL SIGTERM

CMD ["nginx", "-g", "daemon off;"]

This creates two containers, the first one installs the CLI and builds the app, the second one copies files from the "build container" to its folder served by an Nginx HTTP server, then the first container gets destroyed.

This assumes you have proper nginx.conf and site.conf in a nginx folder that hold your certificate configuration (and by the way you have to add the certificate and the private key files in the Dockerfile too). You could also use Apache as an HTTP server.