Despite substantial unsuccessful research of this problem, I believe that it is probably not that hard to solve, it is just that I do not have enough experience with Angular and Apache.
So here is the info. I have an Angular 2 app that I wanted to be server-side rendered, in order to improve its SEO, as well as to improve the appearance of the links to the site shared on social media.
The server on which the site is hosted is Linux Ubuntu Linux ubuntu 18.04.
Web server application is Apache2.
I have followed the instructions for Server-Side rendering from the official Angular documentation.
Also, I started the server.js file, so it is serving the application at port 4000. And I have to point it out, I have no problems running it locally. The problem is when I try to run it on the server...
For security reasons, I will not be using real domains in this post.
When opening the page: www.mydomainexample.com/ssr I get this error:
Here is my folder structure:
- /var/www/html/
- ssr/
- .htaccess
- server.js
- dist/
- browser/
- 3rdpartylicenses.txt
- es2015-polyfills.js
- favicon.ico
- fontawesome-webfont.svg
- fontawesome-webfont.ttf
- fontawesome-webfont.woff
- fontawesome-webfont.woff2
- index.html
- main.js
- polyfills.js
- runtime.js
- scripts.js
- styles.css
- assets
- server/
- main.js
- main.js.map
- browser/
- ssr/
Here is the apache2.conf
...
<Directory />
Options FollowSymLinks
AllowOverride None
Require all denied
</Directory>
<Directory /usr/share>
AllowOverride None
Require all granted
</Directory>
<Directory /var/www/>
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</Directory>
...
Here is the .htaccess file:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /ssr/
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ - [L]
RewriteRule ^ /dist/browser/index.html
</IfModule>
<VirtualHost *:80>
ServerName mydomainexample.com
ServerAlias www.mydomainexample.com
<Proxy *>
Order allow,deny
Allow from all
</Proxy>
ProxyPreserveHost On
ProxyRequests Off
ProxyPass / http://localhost:4000/
ProxyPassReverse / http://localhost:4000/
</VirtualHost>
<VirtualHost *:443>
ServerName mydomainexample.com
ServerAlias www.mydomainexample.com
<Proxy *>
Order allow,deny
Allow from all
</Proxy>
ProxyPreserveHost On
ProxyRequests Off
ProxyPass / https://localhost:4000/
ProxyPassReverse / https://localhost:4000/
</VirtualHost>
Also, I believe it is important to show a part of index html file, and I believe that the base tag is significant as well. Here is the base tag from index.html file:
...
<base href="/">
...
