How to build angular 4 apps in nginx or apache httpd?

Question

Hi I am trying to build the Angular 4 app, steps followed is below -

Build ng build

In my amazon ec2 instance I am running apache. Steps followed -

#!/bin/bash
yum install httpd -y
yum update -y
cp dist/* /var/www/html/
service httpd start
chkconfig httpd on

Everything works but my app is using auth0 for authentication, I see they do callback to http://ip/callback

My Application says - 404 Not found.

I tried to build like ng build --base-href ., it didnt worked! Please help me how to build this one, please note that when I useng serve` in my local everything works awesome. but when I am trying to deploy to production its giving this error. I am pretty sure something wrong I am doing while building the app.

I tried nginx docker container, it gives the same error. My docker file looks like this.

FROM nginx COPY dist /usr/share/nginx/html

1. docker build -t ng-auth0-web-dev .
2. docker run -d -p 8080:80 ng-auth0-web-dev

Anything wrong in above docker file?

https://github.com/auth0-samples/auth0-angular-samples/tree/master/01-Login - sample app code

https://manage.auth0.com/#/logs - No error in logs, that means auth0 is working fine but I am getting build error with angular.

Exact error:

Update -

I tried building like this also - ng build --base-href http://34.213.164.54/ and ng build --base-href http://34.213.164.54:80/, but same error.

So the problem is Narrowed down to How I am building the Angular App

public handleAuthentication(): void {
    this.auth0.parseHash((err, authResult) => {
      if (authResult && authResult.accessToken && authResult.idToken) {
        window.location.hash = '';
        this.setSession(authResult);
          localStorage.setItem('email', profile.email);
          this.verticofactoryService.registerUser(u);
          this.router.navigate(['/home']);
        });



      } else if (err) {
        this.router.navigate(['/home']);
        console.log(err);
        alert(`Error: ${err.error}. Check the console for further details.`);
      }
    });
  }

Answer 1

Angular apps are perfect candidates for serving with a simple static HTML server. You don't need a server-side engine to dynamically compose application pages because Angular does that on the client-side.

If the app uses the Angular router, you must configure the server to return the application's host page (index.html) when asked for a file that it does not have.

Suppose in your nginx server conf just add some thing like this. try_files $uri $uri/ /index.html;

Reference - https://github.com/auth0-samples/auth0-angular-samples/tree/master/02-User-Profile

Thank you JB Nizet, it worked finally.