Angular routing not working when deployed statically with Node

Question

I am building my angular project and inserting the build output into a public folder in the root of my node project.

In my app.js file, I have the following code:

...
app.use(express.static(path.join(__dirname, 'public')));
...
app.get('*', (req, res) => {
     res.send(path.join(__dirname, 'public/index.html'));
});

When deploying the project, this works perfectly; when I load the page, the index.html is rendered and navigating through the page works.

However, when I enter a url like for example '/admin', which is defined in my angular routing, I get a not found error.

How can this be solved?

Nico Velazquez · Accepted Answer · 2020-05-30 20:34:40Z

1

The problem was in the .send() method... I replaced this:

app.get('*', (req, res) => {
 res.send(path.join(__dirname, 'public/index.html'));
});

with this:

app.get('*', (req, res) => {
 res.sendFile(path.join(__dirname, 'public/index.html'));
});

and it worked. Sorry guys for making you loose time. You helped me research different things though!

answered May 30, 2020 at 20:34

Nico Velazquez

296 bronze badges

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

Comments

Muhammad Fazeel · Accepted Answer · 2020-05-30 05:06:56Z

0

Hope this will solve ur issue Create .htaccess file in root folder and pass

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]

RewriteRule ^(.*) /index.html [NC,L]

answered May 30, 2020 at 5:06

Muhammad Fazeel

5781 gold badge6 silver badges18 bronze badges

4 Comments

Nico Velazquez Over a year ago

I've seen this solution with some differences.

Nico Velazquez Over a year ago

Options -MultiViews RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ index.html [QSA,L]

Nico Velazquez Over a year ago

What exactly does this do? Haven't tried it yet, will do now.

Muhammad Fazeel Over a year ago

.htaccess is a configuration file for use on web servers running the Apache Web Server software. .htaccess files can be used to alter the configuration of the Apache Web Server software to enable/disable additional functionality and features that the Apache Web Server software has to offer. These facilities include basic redirect functionality, for instance if a 404 file not found error occurs

Aakash Garg · Accepted Answer · 2020-05-30 07:00:17Z

0

above router.get, you should have :-

// serve angular front end files from root path
router.use('/', express.static('public', { redirect: false }));

answered May 30, 2020 at 7:00

Aakash Garg

11k2 gold badges11 silver badges29 bronze badges

Comments

Wai Ha Lee · Accepted Answer · 2020-05-30 21:53:01Z

I don't know your code but

you can try setting up the base-href in your index.html
```
<base href="/"> 
```
properly....

Serving with nginx could have a configuration like this. It directs the index.html to the correct routes of your SPA:

root /home/app/dist/;

server {
    listen 8080;
    server_name  localhost;

    location /admin/ {
      alias /home/app/dist/my-app/admin/;
      expires -1;
      add_header Cache-Control "no-cache, must-revalicate, post-check=0 pre-check=0";
      index index.html;
      try_files $uri $uri/ index.html =404;
    }

    location / {
      alias /home/app/dist/my-app/;
      expires -1;
      add_header Cache-Control "no-cache, must-revalicate, post-check=0 pre-check=0";
      index index.html;
      try_files $uri $uri/ index.html =404;
    }
}

see nginx how-to here: https://medium.com/better-programming/how-to-properly-get-angular-and-nginx-working-together-for-development-3e5d158734bf

Collectives™ on Stack Overflow

Angular routing not working when deployed statically with Node

4 Answers 4

Comments

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related