Dockerize Angular with routing and nginx

Question

I am trying to Dockerize a simple Angular 9 application that has routing.

I have the following:

Dockerfile

FROM nginx:alpine
RUN rm -rf /usr/share/nginx/html/*
COPY /dist /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]

I run:

docker build --pull --rm -f "Dockerfile" -t ng-nexct-approval-ui-image:latest "."
docker run --rm -d  -p 4200:80/tcp --name ng-nexct-approval-ui-container ng-nexct-approval-ui-image:latest

When I access:

http://localhost:4200/

I get the nginx page as expected.

If I access:

http://localhost:4200/nexct-approval-ui/index.html

I get access to the index.html file in the /dist directory.

Problem

How do I access the Angular components?

e.g. for:

http://localhost:4200/login

and

http://localhost:4200/approval-edit/1573515

I get a 404.

Question

How do I configure docker so I can access the following Angular routing:

const routes: Routes = [
    { path:'login', component:LoginComponent, canActivate: [AuthGuard] },
    { path: 'approval-list', component: ApprovalListComponent, canActivate: [ApprovalListGuard] },
    { path: 'approval-edit/:tripId', component: ApprovalEditComponent, canActivate: [ApprovalEditGuard] }
];

UPDATE

I add the following to the Dockerfile:

COPY nginx.conf /etc/nginx/conf.d/default.conf

nginx.conf

server {
    listen   80;

    root /usr/share/nginx/html;
    index index.html;

    server_name _;

    location / {
        try_files  $uri /index.html
    }

}

I can access the:

http://localhost:4200/nexct-approval-ui/index.html

(but this is just a blank html file generated in the /dist folder on ng build.

If I try access any of the routes, I now get a 500.

2020/07/21 15:40:35 [error] 29#29: *24 rewrite or internal redirection cycle while internally redirecting to "/index.html", client: 172.17.0.1, server: _, request: "GET /nexct-approval-ui/login HTTP/1.1", host: "localhost:4200"

172.17.0.1 - - [21/Jul/2020:15:40:35 +0000] "GET /nexct-approval-ui/login HTTP/1.1" 500 579 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36" "-"

Surely it is pretty common to run an Angular app on a nginx server. I am struggling to find a clear answer anywhere.

I'm not sure I understand what are you trying to achieve with server_name _; — Neo Anderson
– Neo Anderson, Commented Jul 21, 2020 at 17:44

Richard · Accepted Answer · 2020-07-22 06:58:23Z

1

The problem was in my Dockerfile, when I copied the /dist folder. So I changed from:

COPY /dist /usr/share/nginx/html

to

COPY /dist/nexct-approval-ui /usr/share/nginx/html

and now it works

answered Jul 22, 2020 at 6:58

Richard

8,99534 gold badges128 silver badges258 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Neo Anderson · Accepted Answer · 2020-07-22 07:10:11Z

1

This should make it return the index.html for any URL received, and therefore all the Angular router URIs should work even when going to the URL directly rather than being redirected from an internal section of the app.

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

Also, make sure you're not doing anything crazy with the base_href.

Last time I did this was in Angular4 so I might be outdated :)
Hope this works for you.

Edit to answer question in comment:
The nginx.conf above will expect to find the index.html file under /usr/share/nginx/html. Depending on how the ng build is performed, you need to copy the content of the folder that contains the index file to the root location. Sometimes this is created in a nested folder under dist.

edited Jul 22, 2020 at 7:10

answered Jul 21, 2020 at 17:43

Neo Anderson

6,4302 gold badges14 silver badges30 bronze badges

5 Comments

Richard Over a year ago

Hi Neo, thanks for the answer. When I try access http://localhost:4200/login, I get "GET /login HTTP/1.1" 404 and "/usr/share/nginx/html/login" failed (2: No such file or directory).

Richard Over a year ago

If I change it to: try_files $uri $uri/ /index.html;, I get the following:

[error] 29#29: *2 rewrite or internal redirection cycle while internally redirecting to "/index.html", client: 172.17.0.1, server: , request: "GET /login HTTP/1.1", host: "localhost:4200"  172.17.0.1 - - [22/Jul/2020:06:48:48 +0000] "GET /login HTTP/1.1" 500 579 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36" "-"

.

Neo Anderson Over a year ago

This can happen if you do not have the index under the root directory /usr/share/nginx/html in this case

Neo Anderson Over a year ago

You can connect to the container and have a look if everything is there: docker exec -ti <your-nginx-container-id> sh, then ls /usr/share/nginx/html

Richard Over a year ago

Thanks Neo, the problem was when I copied my /dist folder to nginx (see answer).

Collectives™ on Stack Overflow

Dockerize Angular with routing and nginx

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related