Angular 6 Server Side Errror: Module not found: Error: Can't resolve './dist/server/main.bundle'

Question

I'm working on a project, updating it to Angular 6. After the update, I'm now getting this error when trying to run the server-side rendering build

Module not found: Error: Can't resolve './dist/server/main.bundle'

I tried going to https://angular.io/guide/universal and matching up my code to the SSR files in Angular Universal. This did not work for me.

It seems that the dist folder is not generating a /server folder but is creating a /browser. Im unsure why.

Here's my angular.json file

{
 "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "xilo": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/browser",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": [
              "src/assets",
              "src/favicon.ico"
            ],
            "styles": [
              "src/styles.css",
              "node_modules/font-awesome/css/font-awesome.min.css"
            ],
            "scripts": [
              "node_modules/moment/min/moment.min.js"
            ]
          },
          "configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "xilo:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "xilo:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "xilo:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "karmaConfig": "./karma.conf.js",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "scripts": [
              "node_modules/moment/min/moment.min.js"
            ],
            "styles": [
              "src/styles.css",
              "node_modules/font-awesome/css/font-awesome.min.css"
            ],
            "assets": [
              "src/assets",
              "src/favicon.ico"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/server",
            "main": "main.server.ts",
            "tsConfig": "tsconfig.server.json"
          }
        }
      }
    },
    "xilo-e2e": {
      "root": "",
      "sourceRoot": "e2e",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "./protractor.conf.js",
            "devServerTarget": "xilo:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "e2e/tsconfig.e2e.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "xilo",
  "schematics": {
    "@schematics/angular:class": {
      "spec": false
    },
    "@schematics/angular:component": {
      "spec": false,
      "inlineStyle": true,
      "inlineTemplate": true,
      "prefix": "app",
      "styleext": "css"
    },
    "@schematics/angular:directive": {
      "spec": false,
      "prefix": "app"
    },
    "@schematics/angular:guard": {
      "spec": false
    },
    "@schematics/angular:module": {
      "spec": false
    },
    "@schematics/angular:pipe": {
      "spec": false
    },
    "@schematics/angular:service": {
      "spec": false
    }
  }
}

server.ts

// These are important and needed before anything else
import 'zone.js/dist/zone-node';
import 'reflect-metadata';

import { enableProdMode } from '@angular/core';

import * as express from 'express';
import { join } from 'path';

// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();

// Express server
const app = express();

const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist');

// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main.bundle');

// Express Engine
import { ngExpressEngine } from '@nguniversal/express-engine';
// Import module map for lazy loading
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';

app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [
    provideModuleMap(LAZY_MODULE_MAP)
  ]
}));

app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, 'browser'));

// TODO: implement data requests securely
app.get('/api/*', (req, res) => {
  res.status(404).send('data requests are not supported');
});

// Server static files from /browser
app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));

// All regular routes use the Universal engine
app.get('*', (req, res) => {
  res.render('index', { req });
});

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

Everything is set up exactly to the Angular Universal directions.

Anyone know why my build script would not be generating a /server folder?

"build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server"

package.json

{
  "name": "XXX",
  "version": "XXX",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "XXXXX"
  },
  "engines": {
    "node": "10.7.0",
    "npm": "6.1.0"
  },
  "scripts": {
    "ng": "ng",
    "start": "node dist/server",
    "build": "ng build",
    "build:client-and-server-bundles": "ng build --prod && ng build --prod --project xilo --output-hashing=all",
    "build:prerender": "npm run build:client-and-server-bundles && npm run webpack:server && npm run generate:prerender",
    "build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
    "deploy": "git push origin master && git push heroku master",
    "generate:prerender": "cd dist && node prerender",
    "postinstall": "npm run build:ssr",
    "webpack:server": "webpack --config webpack.server.config.js --progress --colors",
    "serve:prerender": "cd dist/browser && http-server",
    "serve:ssr": "node dist/server"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "6.1.0",
    "@angular/common": "6.1.0",
    "@angular/compiler": "6.1.0",
    "@angular/compiler-cli": "6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "6.1.0",
    "@angular/http": "6.1.0",
    "@angular/language-service": "6.1.0",
    "@angular/platform-browser": "6.1.0",
    "@angular/platform-browser-dynamic": "6.1.0",
    "@angular/platform-server": "6.1.0",
    "@angular/router": "6.1.0",
    "@nguniversal/express-engine": "^5.0.0-beta.5",
    "@nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.5",
    "@nicky-lenaers/ngx-scroll-to": "^0.5.0",
    "@types/moment": "^2.13.0",
    "@types/node": "^8.10.21",
    "angular-file": "^0.4.1",
    "angular2-moment": "^1.9.0",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.5.7",
    "cpy-cli": "^1.0.1",
    "express": "^4.16.3",
    "font-awesome": "^4.7.0",
    "http-server": "^0.10.0",
    "moment": "^2.22.2",
    "ng-circle-progress": "^0.9.9",
    "ng-hotjar": "0.0.13",
    "ng-intercom": "^1.0.0-beta.5-2",
    "ng2-google-charts": "^3.4.0",
    "ng4-geoautocomplete": "^0.1.0",
    "ngx-filter-pipe": "^1.0.2",
    "ngx-loading": "^1.0.14",
    "ngx-pagination": "^3.0.3",
    "reflect-metadata": "^0.1.10",
    "rxjs": "^6.2.2",
    "rxjs-compat": "^6.2.2",
    "ts-loader": "^4.4.2",
    "typescript": "2.9.2",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.20"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.8",
    "@angular/cli": "^6.0.8",
    "webpack-cli": "^3.1.0"
  }
}

Answer 1

Error it self say's what is missing, the SSR build requires the main.bundle.js So update the commands in package.json and run the commands to build the main.bundle.js

"build:client-and-server-bundles": "ng build --prod && ng run defaultProject:server && npm run webpack:server"

defaultProject name can be found from angular.json file. then run

"serve:ssr": "node dist/careercontroller/server/main.bundle.js"