Angular 6 服务器端错误：找不到模块：错误：无法解析“./dist/server/main.bundle”
Posted
技术标签:
【中文标题】Angular 6 服务器端错误：找不到模块：错误：无法解析“./dist/server/main.bundle”【英文标题】：Angular 6 Server Side Errror: Module not found: Error: Can't resolve './dist/server/main.bundle' 【发布时间】：2019-01-07 08:31:22 【问题描述】：我正在开发一个项目，将其更新为 Angular 6。更新后，我现在在尝试运行服务器端渲染构建时遇到此错误
Module not found: Error: Can't resolve './dist/server/main.bundle'
我尝试转到 https://angular.io/guide/universal 并将我的代码与 Angular Universal 中的 s-s-r 文件进行匹配。这对我不起作用。
dist 文件夹似乎没有生成 /server 文件夹，而是创建了 /browser。我不确定为什么。
这是我的 angular.json 文件
"$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`);
);
一切都完全按照 Angular Universal 的方向进行设置。
有人知道为什么我的构建脚本不会生成 /server 文件夹吗？
"build:s-s-r": "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:s-s-r": "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:s-s-r",
"webpack:server": "webpack --config webpack.server.config.js --progress --colors",
"serve:prerender": "cd dist/browser && http-server",
"serve:s-s-r": "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.json 文件，请尝试将其添加到您的问题中。
@HDJEMAI 已添加！
Angular-universal getting error: You must pass in a NgModule or NgModuleFactory to be bootstrapped的可能重复
【参考方案1】：
错误它自己说缺少什么，s-s-r 构建需要 main.bundle.js
所以更新package.json中的命令并运行命令来构建main.bundle.js
"build:client-and-server-bundles": "ng build --prod && ng run defaultProject:server && npm run webpack:server"
defaultProject 名称可以从 angular.json 文件中找到。
然后运行
"serve:s-s-r": "node dist/careercontroller/server/main.bundle.js"
【讨论】：
【参考方案2】：npm cache clear --force
rm -rf node_modules
npm install
然后祈祷。
【讨论】：
【参考方案3】：看起来您缺少运行 Angular 服务器包的命令。 "ng run xilo:server" 将它添加到你的 package.json 中。
"build:s-s-r": "npm run build:client-and-server-bundles && ng run xilo:server && npm run webpack:server"
如果运气不好，你能发布你的 webpack.server.config 吗？
【讨论】：
【参考方案4】：我在运行时遇到了同样的错误
npm run build:client-and-server-bundles && npm run webpack:server
查看错误...
./server.ts 中的错误未找到模块：错误：无法解析 './dist/server/main.bundle' in '...'
我转到 ./server.ts 文件并看到以下内容：
所以，在我的 ./server.ts 文件中，我只是将这两行从
const AppServerModuleNgFactory, LAZY_MODULE_MAP = 要求('./dist/server/main.bundle'); 常量 提供模块映射 = require('@nguniversal/module-map-ngfactory-loader');分为以下两行
从 './dist/my-project-server/main' 导入 AppServerModuleNgFactory, LAZY_MODULE_MAP ； 从“@nguniversal/module-map-ngfactory-loader”导入 provideModuleMap ；现在，npm run build:client-and-server-bundles && npm run webpack:server 就像一个魅力
【讨论】：
以上是关于Angular 6 服务器端错误：找不到模块：错误：无法解析“./dist/server/main.bundle”的主要内容，如果未能解决你的问题，请参考以下文章
由于在 Angular 6 中找不到标头而导致的 CrossOrigin 错误
Angular + web3.js：找不到模块：错误：无法解析“加密”