title: Angular 5 dockerized app behind nginx
body: <p>I am having issues while trying to deploy my Angular 5.1.2 application, basically it works fine in local, but it displays me a blank page on my server, with 404 errors like </p>
  
  <blockquote>
    <p>Fail of loading script element which source is ...</p>
  </blockquote>
  
  <p>For like inline.js, polyfills.js, scripts.js, main.js ...</p>
  
  <p>I think I am doing something wrong with paths, any idea on how to fix this?</p>
  
  <p>Dockerfile</p>
  
  <pre><code>FROM node:boron
  
  # Create app directory
  WORKDIR /usr/app
  
  # Install app dependencies
  COPY package.json .
  RUN npm install --quiet
  
  # Bundle app source
  COPY . .
  
  EXPOSE 4200
  
  CMD [ "npm", "build" ]
  CMD [ "npm", "start" ]
  </code></pre>
  
  <p>package.json</p>
  
  <pre><code>    {
    "name": "inspinia",
    "version": "2.7.1",
    "scripts": {
      "ng": "ng",
      "start": "ng serve --prod -H 0.0.0.0 --live-reload false",
      "build": "ng build --prod --build-optimizer",
      "test": "ng test",
      "lint": "ng lint",
      "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
      "@agm/core": "^1.0.0-beta.2",
      "@angular/animations": "^5.1.2",
      "@angular/common": "^5.1.2",
      "@angular/compiler": "^5.1.2",
      "@angular/core": "^5.1.2",
      "@angular/forms": "^5.1.2",
      "@angular/http": "^5.1.2",
      "@angular/platform-browser": "^5.1.2",
      "@angular/platform-browser-dynamic": "^5.1.2",
      "@angular/platform-server": "^5.1.2",
      "@angular/router": "^5.1.2",
      "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.8",
      "angular2-datatable": "^0.6.0",
      "angular2-in-memory-web-api": "^0.0.21",
      "angular2-jwt": "^0.2.3",
      "animate.css": "^3.5.2",
      "bootstrap": "^3.3.7",
      "chart.js": "^2.7.1",
      "core-js": "^2.5.3",
      "font-awesome": "^4.7.0",
      "jquery": "^3.1.0",
      "jquery-slimscroll": "^1.3.8",
      "jquery-sparkline": "^2.4.0",
      "jvectormap": "^2.0.4",
      "metismenu": "^2.5.0",
      "ng2-charts": "^1.6.0",
      "ngx-bootstrap": "^2.0.3",
      "peity": "^3.2.1",
      "rxjs": "^5.5.6",
      "zone.js": "^0.8.18",
      "typescript": "2.6.2"
    },
    "devDependencies": {
      "@angular/cli": "^1.7.3",
      "@angular/compiler-cli": "^5.1.2",
      "@types/jasmine": "2.8.2",
      "@types/node": "^8.5.2",
      "codelyzer": "^4.0.2",
      "jasmine-core": "^2.8.0",
      "jasmine-spec-reporter": "4.2.1",
      "karma": "^2.0.0",
      "karma-chrome-launcher": "^2.2.0",
      "karma-cli": "^1.0.1",
      "karma-coverage-istanbul-reporter": "^1.3.3",
      "karma-jasmine": "^1.1.1",
      "karma-jasmine-html-reporter": "^0.2.2",
      "protractor": "^5.2.2",
      "ts-node": "^4.1.0",
      "tslint": "^5.8.0"
    }
  }
  </code></pre>
  
  <p>part of my nginx configuration</p>
  
  <pre><code>server {
      listen 443 ssl http2;
      listen [::]:443 ssl http2;
  
      server_name url www.url;
  
      location / {
          proxy_pass         http://localhost:4200/;
          proxy_set_header X-Forwarded-Host $host;
          proxy_set_header X-Forwarded-Server $host;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          try_files $uri $uri/ /index.html =404;
      }
  
      root /var/www/iothings-app;
   }
  </code></pre>
  
  <p>and I run with:</p>
  
  <pre><code>docker build -t things-app .
  docker run --name iothings-app -p 0.0.0.0:4200:4200 -d things-app
  </code></pre>