Error: ENOENT: no such file or directory, open 'dist\browser\index.html'

Question

Whenever I run ng deploy --preview , I get the error:

Error: ENOENT: no such file or directory, open 'dist\index.html'
    at Object.openSync (fs.js:457:3)
    at readFileSync (fs.js:359:35)

I've tried following multiple tutorials on the web, but couldn't solve the error. I've tried to access dist/browser/index.html instead with no success.

server.ts

(global as any).WebSocket = require('ws');
(global as any).XMLHttpRequest = require('xhr2');

import 'zone.js/dist/zone-node';

import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';

import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';
import { existsSync, readFileSync } from 'fs';

const path = require('path');
const domino = require('domino');
const template = readFileSync(path.join('.', 'dist', 'index.html')).toString();
const win = domino.createWindow(template);

global['window'] = win;
global['document'] = win.document;

// The Express app is exported so that it can be used by serverless Functions.
export function app(): express.Express {
  const server = express();
  const distFolder = join(process.cwd(), 'dist/iquench-website/browser');
  const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';

  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
  server.engine('html', ngExpressEngine({
    bootstrap: AppServerModule,
  }));

  server.set('view engine', 'html');
  server.set('views', distFolder);

  // Example Express Rest API endpoints
  // server.get('/api/**', (req, res) => { });
  // Serve static files from /browser
  server.get('*.*', express.static(distFolder, {
    maxAge: '1y'
  }));

  // All regular routes use the Universal engine
  server.get('*', (req, res) => {
    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
    // res.render(indexHtml, { req, res });
  });

  return server;
}

function run(): void {
  const port = process.env.PORT || 4000;

  // Start up the Node server
  const server = app();
  server.listen(port, () => {
    console.log(`Node Express server listening on http://localhost:${port}`);
  });
}

// Webpack will replace 'require' with '__webpack_require__'
// '__non_webpack_require__' is a proxy to Node 'require'
// The below code is to ensure that the server is run only when not requiring the bundle.
declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
const moduleFilename = mainModule && mainModule.filename || '';
if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
  run();
}

export * from './src/main.server';

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "iquench-website": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        },
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/browser",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.webmanifest"
            ],
            "styles": [
              "src/styles/styles.scss",
              "src/styles/variables.scss",
              "src/styles/theme.scss",
              "src/styles/form-styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "serviceWorker": true,
              "ngswConfigPath": "ngsw-config.json"
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "iquench-website:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "iquench-website:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "iquench-website: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",
              "src/manifest.webmanifest"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json",
              "tsconfig.server.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "iquench-website:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "iquench-website:serve:production"
            }
          }
        },
        "deploy": {
          "builder": "@angular/fire:deploy",
          "options": {
            "ssr": true
          }
        },
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/server",
            "main": "server.ts",
            "tsConfig": "tsconfig.server.json",
            "externalDependencies": [
              "firebase",
              "@firebase/app",
              "@firebase/analytics",
              "@firebase/auth",
              "@firebase/component",
              "@firebase/database",
              "@firebase/firestore",
              "@firebase/functions",
              "@firebase/installations",
              "@firebase/messaging",
              "@firebase/storage",
              "@firebase/performance",
              "@firebase/remote-config",
              "@firebase/util"
            ]
          },
          "configurations": {
            "production": {
              "outputHashing": "media",
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "sourceMap": false,
              "optimization": true
            }
          }
        },
        "serve-ssr": {
          "builder": "@nguniversal/builders:ssr-dev-server",
          "options": {
            "browserTarget": "iquench-website:build",
            "serverTarget": "iquench-website:server"
          },
          "configurations": {
            "production": {
              "browserTarget": "iquench-website:build:production",
              "serverTarget": "iquench-website:server:production"
            }
          }
        },
        "prerender": {
          "builder": "@nguniversal/builders:prerender",
          "options": {
            "browserTarget": "iquench-website:build:production",
            "serverTarget": "iquench-website:server:production",
            "routes": [
              "/"
            ]
          },
          "configurations": {
            "production": {}
          }
        }
      }
    }
  },
  "defaultProject": "iquench-website"
}

firebase.json

{
  "hosting": [
    {
      "target": "iquench-website",
      "public": "dist\\iquench-website\\dist\\browser",
      "ignore": [
        "**/.*"
      ],
      "headers": [
        {
          "source": "*.[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f].+(css|js)",
          "headers": [
            {
              "key": "Cache-Control",
              "value": "public,max-age=31536000,immutable"
            }
          ]
        }
      ],
      "rewrites": [
        {
          "source": "**",
          "function": "ssr"
        }
      ]
    }
  ],
  "functions": {
    "source": "dist"
  }
}

I'm pretty new to Angular Universal and SSR, so please let me know if I'm doing something wrong. Thanks in advance!

Answer 1

1. First, double check your relative path for the distFolder variable is accessible. Since, the distFolder from server.ts usually points to the files in the client app, for eg dist\iquench-website\browser in your app looks like a static path. Also try this, it should create the correct relative path for you automatically so you don't have to mess with it, just tweak it.

   //const files = fs.readdirSync(${process.cwd()}/dist/{MyProjectName}-SPA/server); const files = fs.readdirSync(${process.cwd()}/dist/iquench-website-SPA/server);

2. Second, also I don't see your dist folder configured in your Angular.Json, are you sure its configured in angular.json file? So, you need to add/setup this in your Angular.json

---

 "projects": {
      //configure this to match your output & frontend serving directory on build for your SSR app
      "your-project-name": {
        "architect": {
          "build": {
            "options": {
              //"outputPath": "dist/frontend"
              "outputPath": "dist/iquench-website"