Angular SSR Error: Failed to lookup view "index" in views directory

Question

I have deployed angular ssr project to cpanel and i'm getting error when running the project using this command, node dist/angular-universal/server/main.js.

Error:

Node Express server listening on http://localhost:4000
Error: Failed to lookup view "index" in views directory "/home/angularssrtest/public_html/dist/browser"
    at Function.render (/home/angularssrtest/public_html/dist/angular-universal/server/main.js:1:440409)
    at ServerResponse.render (/home/angularssrtest/public_html/dist/angular-universal/server/main.js:1:891199)
    at server.get (/home/angularssrtest/public_html/dist/angular-universal/server/main.js:1:2976541)
    at Layer.handle [as handle_request] (/home/angularssrtest/public_html/dist/angular-universal/server/main.js:1:464045)
    at next (/home/angularssrtest/public_html/dist/angular-universal/server/main.js:1:448841)
    at Route.dispatch (/home/angularssrtest/public_html/dist/angular-universal/server/main.js:1:448870)
    at Layer.handle [as handle_request] (/home/angularssrtest/public_html/dist/angular-universal/server/main.js:1:464045)
    at /home/angularssrtest/public_html/dist/angular-universal/server/main.js:1:3290536
    at param (/home/angularssrtest/public_html/dist/angular-universal/server/main.js:1:3292042)
    at param (/home/angularssrtest/public_html/dist/angular-universal/server/main.js:1:3292449)

This is my folder structure.

public_html:

• dist:
  • angular-universal
    • browser
    • server .htaccess

---

.htaccess code:

<IfModule mod_rewrite.c>
RewriteEngine on
# Redirect Public ports to NodeJS port
RewriteEngine On
RewriteRule ^$ http://127.0.0.1:4000/ [P,L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ http://127.0.0.1:4000/$1 [P,L]
</IfModule>

reference: https://www.purcellyoon.com/insights/articles/angular-universal-server-side-rendering-ssr-with-cpanel-whm

Please help to fix the issue.

Thanks Advanced.

Answer 1

I had same problems following the same reference: https://www.purcellyoon.com/insights/articles/angular-universal-server-side-rendering-ssr-with-cpanel-whm

Here is how i fixed the issue: Upload the dist folder. In most cases your dist folder have your project name as folder in it. If this is your case, after upload to cPanel, the directory should look like this dist/PROJECT_NAME/server and dist/PROJECT_NAME/browser inside your public_html

Then login to your server via ssh and run these commands: cd public_html -> it should look like /home/account_name/public_html node dist/PROJECT_NAME/server/main.js output should be: Node Express server listening on http://localhost:4000 then access the site url and your site should load fine.

Answer 2

I fixed mine by changing the line about 'distFolder': From

const distFolder = join(process.cwd(), "dist/browser");

to

const distFolder = join(__dirname, "../../dist/browser");

__dirname seems a better way to dynamically get the folder name.