CODEWITHSUNDEEP
angulardockerproduction
meai2312
meai2312

Reputation: 317

Struggle starting angular app with production configuration

I created an angular 8 app and use docker to serve it. I use the RUN npm run build --env=prod --prod to build the app in production mode like described in serveral online-tutorials.

If I start my app with the Dockerfile and the npm run build --prod command always the development configuration will be used (api calls with localhost:7000/api e.g. and not the some_url.de/api ..)

I dont know what I am doing wrong. In all tutorial with just the build tag the proper configuration is beeing selected..

Dockerfile

FROM node:alpine AS build-stage

ARG env=prod

WORKDIR /app

# to use cache on node_modules
COPY package*.json /app/
RUN npm install

COPY . /app/
RUN npm run build --prod

FROM nginx:alpine
COPY nginx.conf /etc/nginx/nginx.conf

COPY --from=build-stage /app/dist/ /usr/share/nginx/html/

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

nginx.conf

events {}

http{
    server {
    listen 80;
    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ /index.html =404;
        }
    }
}

In my main.ts I have this snippet:

if (environment.production) {
  enableProdMode();
}

In the folder src/app/environments I have to env configurations:

environment.ts

export const environment = {
  production: false,
  appURL: 'http://localhost:7000/api',
  dev_mode: false,
  show_all_tabs: true,
};

environment.prod.ts

export const environment = {
    production: true,
    appURL: 'http://some_url.de/api',
    dev_mode: false,
    show_all_tabs: true,
  };

package.json

{
  "name": "test",
  "version": "1.0.2",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "1.0.0-beta.2",
    "@angular/animations": "5.2.2",
    "@angular/common": "5.2.2",
    "@angular/compiler": "5.2.2",
    "@angular/compiler-cli": "5.2.2",
    "@angular/core": "5.2.2",
    "@angular/forms": "5.2.2",
    "@angular/http": "5.2.2",
    "@angular/platform-browser": "5.2.2",
    "@angular/platform-browser-dynamic": "5.2.2",
    "@angular/platform-server": "5.2.2",
    "@angular/router": "5.2.2",
    "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.9",
    "@ngx-translate/core": "^9.1.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "@swimlane/ngx-charts": "^7.3.0",
    "@types/angular": "^1.6.54",
    "@types/file-saver": "^1.3.1",
    "@types/jasmine": "2.5.45",
    "@types/node": "^6.14.0",
    "angular-2-local-storage": "^2.0.0",
    "angular2-multiselect-dropdown": "2.1.2",
    "bootstrap": "^4.3.1",
    "copy-webpack-plugin": "^4.5.3",
    "core-js": "2.4.1",
    "express": "^4.16.3",
    "file-saver": "^2.0.0-rc.4",
    "font-awesome": "4.7.0",
    "jquery": "^3.4.1",
    "jw-bootstrap-switch-ng2": "1.0.10",
    "ng2-nouislider": "1.6.1",
    "ng5-slider": "^1.2.1",
    "ngx-chips": "1.6.3",
    "ngx-gallery": "3.1.4",
    "ngx-pagination": "^4.0.0",
    "ngx-spinner": "^2.0.0",
    "nouislider": "9.2.0",
    "popper.js": "1.12.6",
    "rellax": "1.4.0",
    "rxjs": "5.5.6",
    "typescript": "2.6.1",
    "xlsx": "^0.15.5",
    "xml-writer": "^1.7.0",
    "zone.js": "0.8.4",
    "node-sass": "^4.14.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.8.0",
    "@angular/cli": "^6.2.9",
    "@angular/compiler-cli": "5.2.2",
    "@angular/language-service": "4.0.0",
    "@types/jasmine": "2.5.45",
    "@types/node": "^6.14.0",
    "codelyzer": "2.0.0",
    "jasmine-core": "2.6.2",
    "jasmine-spec-reporter": "4.1.0",
    "karma": "1.7.0",
    "karma-chrome-launcher": "2.1.1",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "1.2.1",
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "protractor": "^5.4.1",
    "ts-node": "3.0.4",
    "tslint": "5.3.2",
    "typescript": "2.6.1"
  }
}

Upvotes: 2

Views: 1368

Answers (1)

anesko
anesko

Reputation: 31

You need to pass parameters to the ng build and you cannot pass them directly to npm. Add -- to let npm know that the next parameters are not for it but for the ng command that runs in your script package.json. Then you can pass the --prod parameter that uses your environment.prod.ts.

e.g. RUN npm run build -- --prod

Upvotes: 3

Related Questions