我试图将 angular-universal 添加到我现有的angular 5应用程序中以进行服务器端渲染，因为这需要花费很多时间来加载，但是当我尝试构建项目时会抛出此错误错误：
/ home / ekodev / angular_b2b / ng5 / src / node_modules不存在或不存在 目录/ home / ekodev / angular_b2b / node_modules不存在或 不是目录/ home / ekodev / node_modules不存在或不存在 目录/ home / node_modules不存在或不是目录
/ node_modules不存在或不是要查找的目录 / home / ekodev / angular_b2b / ng5 / node_modules中的模块 使用描述文件：/home/ekodev/angular_b2b/ng5/package.json（相对路径：./ node_modules） 使用描述文件后：/home/ekodev/angular_b2b/ng5/package.json（相对路径： ./node_modules） 使用描述文件：/home/ekodev/angular_b2b/ng5/package.json（相对路径： ./node_modules/app/shop/shop.module.ngfactory.js） 没有扩展 /home/ekodev/angular_b2b/ng5/node_modules/app/shop/shop.module.ngfactory.js 不存在 .ts /home/ekodev/angular_b2b/ng5/node_modules/app/shop/shop.module.ngfactory.js.ts 不存在 .js /home/ekodev/angular_b2b/ng5/node_modules/app/shop/shop.module.ngfactory.js.js 不存在 作为目录 /home/ekodev/angular_b2b/ng5/node_modules/app/shop/shop.module.ngfactory.js 在以下位置查找模块不存在 / home / ekodev / angular_b2b / ng5 / node_modules 使用描述文件：/home/ekodev/angular_b2b/ng5/package.json（相对路径：./ node_modules） 使用描述文件后：/home/ekodev/angular_b2b/ng5/package.json（相对路径： ./node_modules） 使用描述文件：/home/ekodev/angular_b2b/ng5/package.json（相对路径： ./node_modules/app/shop/shop.module.ngfactory.js） 没有扩展 /home/ekodev/angular_b2b/ng5/node_modules/app/shop/shop.module.ngfactory.js 不存在 .ts /home/ekodev/angular_b2b/ng5/node_modules/app/shop/shop.module.ngfactory.js.ts 不存在 .js /home/ekodev/angular_b2b/ng5/node_modules/app/shop/shop.module.ngfactory.js.js 不存在 作为目录 /home/ekodev/angular_b2b/ng5/node_modules/app/shop/shop.module.ngfactory.js 在/中寻找模块不存在 找不到描述文件 找不到描述文件 没有扩展 /app/shop/shop.module.ngfactory.js不存在 .ts /app/shop/shop.module.ngfactory.js.ts不存在 .js /app/shop/shop.module.ngfactory.js.js不存在 作为目录 /app/shop/shop.module.ngfactory.js不存在
package.json看起来像这样
{
"name": "app",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "webpack-dev-server --port=4200",
"build": "webpack",
"test": "karma start ./karma.conf.js",
"lint": "ng lint",
"e2e": "protractor ./protractor.conf.js",
"build:universal": "npm run build:client-and-server-bundles && npm run webpack:server",
"server:universal": "node dist/server.js",
"build:client-and-server-bundles": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng build --prod && ng build --prod --app 1 --output-hashing=false",
"webpack:server": "webpack --config webpack.server.config.js --progress --colors",
"pree2e": "webdriver-manager update --standalone false --gecko false --quiet"
},
"private": true,
"dependencies": {
"@agm/core": "^1.0.0-beta.2",
"@angular/animations": "5.2.0",
"@angular/cdk": "5.1.0",
"@angular/common": "5.2.0",
"@angular/compiler": "5.2.0",
"@angular/core": "5.2.0",
"@angular/flex-layout": "^2.0.0-beta.10",
"@angular/forms": "5.2.0",
"@angular/http": "5.2.0",
"@angular/material": "5.1.0",
"@angular/platform-browser": "5.2.0",
"@angular/platform-browser-dynamic": "5.2.0",
"@angular/platform-server": "^5.2.0",
"@angular/router": "5.2.0",
"@nguniversal/express-engine": "^7.1.1",
"@nguniversal/module-map-ngfactory-loader": "^7.1.1",
"@swimlane/ngx-charts": "^7.0.1",
"@swimlane/ngx-datatable": "11.1.5",
"angular-calendar": "0.23.3",
"angular-image-slider": "0.0.8",
"angular-sortablejs": "^2.0.6",
"angular-tree-component": "6.1.0",
"angular-vrviewer": "^0.1.4",
"angular5-recaptcha": "0.0.2",
"angular5-social-login": "^1.0.9",
"angularfire2": "^5.0.1",
"aws-sdk": "^2.319.0",
"browser-sync": "^2.26.3",
"chart.js": "2.6.0",
"core-js": "2.4.1",
"crypto-ts": "^1.0.2",
"d3": "^4.9.1",
"dragula": "3.7.2",
"file-saver": "^2.0.1",
"firebase": "^5.5.1",
"font-awesome": "4.7.0",
"hammerjs": "2.0.8",
"intl": "^1.2.4",
"jquery": "3.2.1",
"leaflet": "^1.0.2",
"moment": "^2.15.0",
"ng-animate": "^0.3.4",
"ng2-charts": "1.6.0",
"ng2-dragula": "1.3.1",
"ng2-file-upload": "1.2.1",
"ng2-translate": "5.0.0",
"ng2-validation": "4.2.0",
"ngx-bootstrap": "^3.0.1",
"ngx-color-picker": "^4.0.3",
"ngx-device-detector": "^1.3.5",
"ngx-editor": "^3.3.0",
"ngx-mat-select-search": "^1.3.1",
"ngx-material-timepicker": "^2.8.4",
"ngx-order-pipe": "^2.0.1",
"ngx-pagination": "^3.2.1",
"ngx-perfect-scrollbar": "5.0.0-7",
"ngx-spinner": "^7.0.0",
"ngx-swiper-wrapper": "^6.4.1",
"ngx-ui-switch": "^8.0.0",
"perfect-scrollbar": "^1.3.0",
"quill": "^1.2.0",
"rxjs": "^6.2.2",
"rxjs-compat": "^6.3.3",
"screenfull": "^3.2.2",
"simple-line-icons": "^2.4.1",
"sortablejs": "^1.6.0",
"tether": "^1.4.0",
"ts-loader": "^3.5.0",
"zone.js": "^0.8.14"
},
"devDependencies": {
"@angular/cli": "1.6.5",
"@angular/compiler-cli": "5.2.0",
"@types/jasmine": "2.5.52",
"@types/jquery": "3.2.0",
"@types/node": "^7.0.8",
"codelyzer": "3.0.1",
"jasmine-core": "2.6.3",
"jasmine-spec-reporter": "4.1.0",
"karma": "1.7.0",
"karma-chrome-launcher": "2.1.1",
"karma-cli": "1.0.1",
"karma-coverage-istanbul-reporter": "1.3.0",
"karma-jasmine": "1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "^5.4.1",
"ts-node": "3.0.6",
"tslint": "5.4.3",
"typescript": "2.4.2"
}
}
webpack.server.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: { server: './server.ts' },
resolve: { extensions: ['.js', '.ts'] },
target: 'node',
mode: 'none',
// this makes sure we include node_modules and other 3rd party libraries
externals: [/node_modules/],
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js'
},
module: {
rules: [{ test: /\.ts$/, loader: 'ts-loader' }]
},
plugins: [
// Temporary Fix for issue: https://github.com/angular/angular/issues/11580
// for 'WARNING Critical dependency: the request of a dependency is an expression'
new webpack.ContextReplacementPlugin(
/(.+)?angular(\\|\/)core(.+)?/,
path.join(__dirname, 'src'), // location of your src
{} // a map of your routes
),
new webpack.ContextReplacementPlugin(
/(.+)?express(\\|\/)(.+)?/,
path.join(__dirname, 'src'),
{}
)
]
};
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');
// 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}`);
});
如果有人可以帮助我解决这个问题，那就太好了。已经两个多小时了，我在Google上找不到任何东西。