Bdtjtk

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"

  }

}

npm cache clear --force

rm -rf node_modules

npm install

and pray.

looks like your missing the command to run the angular server bundle.
"ng run xilo:server" add it to your package.json.

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

If no luck, can you post your webpack.server.config?

I got the same error when i ran

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

looking at the error...

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

I went to ./server.ts file and saw the following:

So, in my ./server.ts file, I just converted these 2 lines from

• const { AppServerModuleNgFactory, LAZY_MODULE_MAP } =
  require('./dist/server/main.bundle');


• const { provideModuleMap } =
  require('@nguniversal/module-map-ngfactory-loader');

Into the following 2 lines

• import { AppServerModuleNgFactory, LAZY_MODULE_MAP } from './dist/my-project-server/main';


• import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';

now, npm run build:client-and-server-bundles && npm run webpack:server worked like a charm