ng build --prod not working on Docker container

Question

I am trying to deploy a MEAN stack application on a Docker container. The code for the MEAN stack application is at https://github.com/shivkiyer/quicknoteapp

I created a Docker file for the image:

FROM ubuntu:latest

RUN apt-get update && \
    apt-get install -y git && \
    apt-get install -y curl

RUN apt-get install -y build-essential checkinstall libssl-dev

RUN curl -sL https://deb.nodesource.com/setup_10.x | bash

RUN apt-get install -y nodejs

RUN apt-get update

RUN npm -v

RUN npm cache clean -f && \
    npm install -g @angular/cli

RUN apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 9DA31620334BD75D9DCB49F368818C72E52529D4 && \
    echo "deb [ arch=amd64 ] https://repo.mongodb.org/apt/ubuntu bionic/mongodb-org/4.0 multiverse" | tee /etc/apt/sources.list.d/mongodb-org-4.0.list && \
    apt-get update

RUN apt-get install -y --no-install-recommends apt-utils && \
    apt-get update && \
    DEBIAN_FRONTEND=noninteractive apt-get install -y tzdata

RUN apt-get install debconf-utils

RUN DEBIAN_FRONTEND=noninteractive apt-get install -y mongodb-org

EXPOSE 8080 4200

The Docker image is built OK. I create a container with: docker container run -it --name meanstack2 --mount type=bind,source="$(pwd)",target=/home/mean --publish 4200:4200 meanstack

Since I gave my image a tag of meanstack. In the interactive mode, I create the /data/db directory needed by MongoDB. I start Mongo with the command "mogod &". I run npm install in both the Node JS and Angular directories.

Now the problem starts. When I try to do "ng build --prod" in the Angular CLI directory blog-frontend, I get all kinds of weird errors. When I do "ng build", it works perfectly OK and I am able to view the app on my browser after doing npm start in the Node Js directory "blog-backend".

Why doesn't --prod work? These are the errors I get:

ERROR in ng:///home/mean/blog-frontend/src/app/login-register/login-register.component.html (19,36): Property 'onLogin' does not exist on type 'LoginRegisterComponent'.
ERROR in ng:///home/mean/blog-frontend/src/app/login-register/login-register.component.html (85,42): Property 'resisterUser' does not exist on type 'LoginRegisterComponent'.
ERROR in ng:///home/mean/blog-frontend/src/app/welcome-page/welcome-page.component.html (35,38): Property 'onLogin' does not exist on type 'WelcomePageComponent'.
ERROR in ng:///home/mean/blog-frontend/src/app/note/note-form/note-form.component.html (89,15): Supplied parameters do not match any signature of call target.
ERROR in ng:///home/mean/blog-frontend/src/app/note/note-form/note-form.component.html (95,15): Supplied parameters do not match any signature of call target.
ERROR in /home/mean/blog-frontend/src/app/shared/topics.service.ts (10,33): Property 'configSettings' does not exist on type '{ production: boolean; baseURL: string; }'.
ERROR in /home/mean/blog-frontend/src/app/shared/sub-topics.service.ts (12,33): Property 'configSettings' does not exist on type '{ production: boolean; baseURL: string; }'.
ERROR in /home/mean/blog-frontend/src/app/shared/note.service.ts (14,33): Property 'configSettings' does not exist on type '{ production: boolean; baseURL: string; }'.

yurzui yurzui · Accepted Answer · 2018-10-14T04:32:46

The flag --prod includes Angular AOT compilation and it has some restrictions of how we need to write code.

1) login-register.component.html (19,36): Property 'onLogin' does not exist on type 'LoginRegisterComponent'.

It means that the template defines onLogin method but you didn't define it on LoginRegisterComponent class.

export class LoginRegisterComponent implements OnInit {
  onLogin() { <== must be here
  }

2) login-register.component.html (85,42): Property 'resisterUser' does not exist on type 'LoginRegisterComponent'

the same as above:

export class LoginRegisterComponent implements OnInit {
  onLogin() {
  }

  resisterUser() { <== add this
  }

3) note-form.component.html (89,15): Supplied parameters do not match any signature of call target.

In note-form.component.html you call addText method without parameters:

(click)="addText()"

while in component you defined this method with required parameter textValue

addText(textValue: any) {
  ...
}

To fix it just make it optional

addText(textValue?: any) {
  ...
}

4) note-form.component.html (95,15): Supplied parameters do not match any signature of call target.

The same with addCode

template:

(click)="addCode()"

component:

addCode(codeValue: any) {
  ...
}

Fix:

addCode(codeValue?: any) {
  ...
}

5) Property 'configSettings' does not exist on type.

This error has nothing to do with AOT but rather with Angular CLI restriction.

Shape of your production config should match the shape of development config.

environment.ts

export const environment = {
  production: false,
  configSettings: {
    baseURL: 'http://localhost:4200/api'
  }
};

with the config above you have to define production config with the same properties but you have:

environment.prod.ts

export const environment = {
  production: true,
  baseURL: '/api'
};

Solution:

environment.prod.ts

export const environment = {
  production: true,
  configSettings: {
    baseURL: '/api'
  }
};

ng build --prod not working on Docker container

1 Answers