I am building an Angular app and, when I tried to locally render it in the server side using Angular SSR (https://angular.io/guide/universal). It successfully compiles and runs the server side generated file, that's the message I get:

Node Express server listening on http://localhost:4000

However, when I try to access the specified addresss provided by the CLI, I get this error:

Error: Failed to lookup view "index" in views directory "projects/project-name/frontend/dist/server/dist/project-name/browser"
    at Function.render (Documents/projects/project-name/frontend/dist/server/main.js:139878:17)

I noticed one thing: it's nesting the project folder.

I tried to follow along with some tutorials but I can't manage to find a solution. I have tried changing my angular.json file several times but no luck.

I know you guys don't like quesitons inside another questions but this might be related:

I have set up a multilingual app that also generates a nested path: example: dist/es/es instead of dist/es I really tried searching everywhere for a solution but couldn't find any that could solve my issue so I hope someone with more experience can enlighten me.

In my understanding, when I run npm run dev:ssr it should work, but it doesn't So I am hoping and praying someone can help me.

Heres my angular.json file

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "porject-name": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "i18n": {
        "sourceLocale": "en-US",
        "locales": {
          "pt": "src/locale/messages.pt.xlf",
          "baseHref": ""
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "baseHref": "./",
              "outputHashing": "all"
            },
            "pt": {
               "aot": true,
               "localize": ["pt"],
               "outputPath": "dist/lang",
               "baseHref": "../",
               "i18nMissingTranslation": "error",
             },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "project-name:build:production"
            },
            "pt": {
              "browserTarget":"project-name:build:pt"
            },
            "development": {
              "browserTarget": "project-name:build:development"
            },
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "project-name:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          }
        },
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/server",
            "main": "server.ts",
            "tsConfig": "tsconfig.server.json"
          },
          "configurations": {
            "production": {
              "outputHashing": "media",
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            },
            "pt": {
              "i18nMissingTranslation": "error"
            },
            "development": {
              "optimization": false,
              "sourceMap": true,
              "extractLicenses": false
            }
          },
          "defaultConfiguration": "production"
        },
        "serve-ssr": {
          "builder": "@nguniversal/builders:ssr-dev-server",
          "configurations": {
            "development": {
              "browserTarget": "project-name:build:development",
              "serverTarget": "project-name:server:development"
            },
            "production": {
              "browserTarget": "project-name:build:production",
              "serverTarget": "project-name:server:production"
            }
          },
          "defaultConfiguration": "development"
        },
        "prerender": {
          "builder": "@nguniversal/builders:prerender",
          "options": {
            "routes": [
              "/"
            ]
          },
          "configurations": {
            "production": {
              "browserTarget": "project-name:build:production",
              "serverTarget": "project-name:server:production"
            },
            "development": {
              "browserTarget": "project-name:build:development",
              "serverTarget": "project-name:server:development"
            }
          },
          "defaultConfiguration": "production"
        }
      }
    }
  },
  "defaultProject": "project-name"
}
`

I have tried different configurations but nothing works.

CodePudding user response：

In server.ts file, change your dist folder path, while generating build

from const distFolder = join(process.cwd(), 'dist/project-name/browser'); // for local run

to const distFolder = join(process.cwd(), '../browser'); // for build