How to show Angular 6 wildcard page for 404's with nginx?

Question

I've built an application with Angular 6 and I'm using the Angular 6 wildcard route for 404's. https://angular.io/guide/router#wildcard-route

I'm building the application into an index.html and a bunch of static files with the ng build --prod command and I'm serving the application with nginx. The 404 page does not work when doing this. Is there something special I need to do to get nginx to use the Angular wildcard 404 page? A 404.html isn't actually generated when running ng build --prod

Edit

const appRoutes: Routes = [
  { path: '', component: LandingComponent },
  { path: 'changepassword', canActivate: [ AuthGuard ], component: ChangePasswordComponent },
  { path: 'resetpassword', component: ResetPasswordComponent },
  { path: 'resetpassword/:token', component: ResetPasswordPart2Component },
  { path: '**', component: PageNotFoundComponent }
]

Edit

To confirm, I understand that a 404.html page shouldn't be generated.

Edit

nginx.conf

worker_processes  1;

events {
    worker_connections  1024;
}
 http {
    server {
        listen 80;
        server_name  localhost;
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        include /etc/nginx/mime.types;
        gzip on;
        gzip_min_length 1000;
        gzip_proxied expired no-cache no-store private auth;
        gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
         location / {
            try_files $uri $uri/ /index.html;
        }
    }
}

I don't think it would generate a .html page as the content of the 404 component would be served at whatever route you hit that's not assigned already. Normally Angular apps require webserver config to route everything through the index file... have you configured nginx for this routing? https://stackoverflow.com/questions/45277183/how-to-config-nginx-to-run-angular4-application — Kyle Burkett, Sep 18 '18 at 19:51
@KyleBurkett I just built the entire app and put it in `/usr/share/nginx/html`. The rest of the application is working fine besides the 404. — Programmingjoe, Sep 18 '18 at 20:16
Can you add nginx config, I think the issue might be in the actual server config not in your angular app — Kyle Burkett, Sep 19 '18 at 13:25

score 1 · Answer 1 · answered Sep 18 '18 at 20:11

1

That's not how it works.

When the client (a browser) requests anything other than the static assets, you should return the index.html page. This page will contain a <script> tag which loads code -- the application you created with Angular.

This code checks for the URL path and determines which "page" to show (what DOM to build and present to the end user). If it happens that there are no matches and that the last route is wildcard, then such a "page" will be displayed.

Note that server is never contacted. You do not need to do anything on nginx in order to make Angular's internal routing work (apart from redirect everything to index.html which I explained above).

answered Sep 18 '18 at 20:11

Lazar Ljubenović

18,976
10
56
91

I didn't really think that's how it worked, more just promoting discussion. It's just bizarre that the 404 page being returned once the app is deployed is the nginx 404 page. – Programmingjoe Sep 18 '18 at 20:13
Then you didn't set up the redirects. When user requests `example.com/profile`, he should receive the `index.html` file, not an 404 because `profile.html` doesn't exist on the server. – Lazar Ljubenović Sep 18 '18 at 20:16
Are you talking about redirects within the Angular application or within nginx? The rest of app and all routes work fine – Programmingjoe Sep 18 '18 at 20:19
The nginx redirects. When the cliet requests `example.com/profile`, you currently attempt to look for `profile.html`, fail, and return 404 page. Instead, return `index.html`. Instead of catch-all which serves 404, set up the server so it returns `index.html`. – Lazar Ljubenović Sep 18 '18 at 20:20
Do you mind providing a code snippet? All of my other redirects are working. So if I requested `/changepassword` it works but if i run into a non existing route, it does not. Do I just need to update the nginx 404 setting so it serves index.html? – Programmingjoe Sep 18 '18 at 20:30
"Do I just need to update the nginx 404 setting so it serves index.html" Yes – Lazar Ljubenović Sep 18 '18 at 20:31
1

I've tried a few things, but `location / { try_files $uri $uri/ /index.html; }` seems to be the most commonly suggested. Still no luck. – Programmingjoe Sep 18 '18 at 22:37

score 0 · Answer 2 · answered Sep 19 '18 at 13:29

0

What about nginx config like this:

server {
    root /usr/share/nginx/html;
    try_files $uri $uri/ index.html;
    error_log /var/log/nginx/angular4_error.log;
    access_log /var/log/nginx/angular4_access.log;
}

answered Sep 19 '18 at 13:29

Kyle Burkett

1,375
12
28

How to show Angular 6 wildcard page for 404's with nginx?

2 Answers2