title: How to config nginx to run angular4 application
body: <p>I am new to angular and I would like to put the application on <code>Nginx</code> server on a docker container. </p>
  
  <h1>1. Running the angular application through @angular/cli</h1>
  
  <p>To do that, I did the following steps:</p>
  
  <h2>1.1. Installation of @angular/cli and creation of an angular4 application</h2>
  
  <pre><code>sudo npm install -g @angular/cli
  ng new angular4-on-nginx-with-docker
  </code></pre>
  
  <h2>1.2. Serving the application through <code>npm start</code></h2>
  
  <p>The angular application is working correctly through </p>
  
  <pre><code>npm start
  </code></pre>
  
  <p>Now, I want to avoid the command <code>npm start</code> because I am thinking about developing a dockerized application. To do that, below is:</p>
  
  <h1>2. Running the angular application on nginx</h1>
  
  <h2>2.1. <code>Dockerfile</code> file for nginx</h2>
  
  <pre><code>FROM debian:jessie
  
  MAINTAINER NGINX Docker Maintainers "docker-maint@nginx.com"
  
  ENV NGINX_VERSION 1.11.9-1~jessie
  
  
  RUN apt-key adv --keyserver hkp://pgp.mit.edu:80 --recv-keys 573BFD6B3D8FBC641079A6ABABF5BD827BD9BF62 \
      &amp;&amp; echo "deb http://nginx.org/packages/mainline/debian/ jessie nginx" &gt;&gt; /etc/apt/sources.list \
      &amp;&amp; apt-get update \
      &amp;&amp; apt-get install --no-install-recommends --no-install-suggests -y \
                          ca-certificates \
                          nginx=${NGINX_VERSION} \
      &amp;&amp; rm -rf /var/lib/apt/lists/*
  
  # forward request and error logs to docker log collector
  RUN ln -sf /dev/stdout /var/log/nginx/access.log \
      &amp;&amp; ln -sf /dev/stderr /var/log/nginx/error.log
  
  
  EXPOSE 80 443
  
  CMD ["nginx", "-g", "daemon off;"]
  </code></pre>
  
  <h2>2.2. The config of nginx is below:</h2>
  
  <pre><code>server {
      server_name angular4.dev;
      root /var/www/frontend/src;
  
      try_files $uri $uri/ index.html;
  
      error_log /var/log/nginx/angular4_error.log;
      access_log /var/log/nginx/angular4_access.log;
  }
  </code></pre>
  
  <h2>2.3. The <code>docker-compose.yml</code></h2>
  
  <pre><code>version: '2'
  
  services:
    nginx:
      build: nginx
      ports:
        - 88:80
      volumes:
        - ./nginx/frontend:/var/www/frontend
        - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
        - ./nginx/logs/nginx/:/var/log/nginx
  </code></pre>
  
  <h2>2.4. building the docker image and running the container</h2>
  
  <pre><code>docker-compose up -d --build
  </code></pre>
  
  <h2>2.5. Identification of the IP address of the container</h2>
  
  <pre><code>docker inspect angular4onnginxwithdocker_nginx_1 | grep IPA
              #"SecondaryIPAddresses": null,
              #"IPAddress": "",
              #        "IPAMConfig": null,
              #        "IPAddress": "172.18.0.2",
  </code></pre>
  
  <p>Open your browser on <a href="http://172.18.0.2/" rel="noreferrer">172.18.0.2</a></p>
  
  <h1>The issue</h1>
  
  <p>I think that npm packages are not accessible... I am not sure what is wrong exactly. But, what I can say is that the page is empty and without having any error message in the console.</p>
  
  <p>Below is the code obtained when using <code>nginx</code></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Angular4 on nginx with docker&lt;/title&gt;
    &lt;base href="/"&gt;
  
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;app-root&gt;&lt;/app-root&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This the code of the page obtained by the use of the command <code>npm start</code></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Angular4 on nginx with docker&lt;/title&gt;
    &lt;base href="/"&gt;
  
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;app-root&gt;&lt;/app-root&gt;
  &lt;script type="text/javascript" src="inline.bundle.js"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="polyfills.bundle.js"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="styles.bundle.js"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="vendor.bundle.js"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="main.bundle.js"&gt;&lt;/script&gt;&lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>So, what is wrong???</p>
  
  <p>A repo for that example is available on <a href="https://github.com/mappedinn/angular4-on-nginx-with-docker" rel="noreferrer">github</a></p>