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"
}
}
package.jsonfile try to add it to your question. – Silverplate