带有服务器端渲染的渐进式角应用程序不构建索引
我建立一个渐进的角度应用程序，使用角度通用的服务器端渲染。 我无法使SSR正常工作。 这个应用程序连接到postgres，并在后端使用express / node。 确切的问题是运行服务器时，我无法加载应用程序。 我得到一个错误，说它找不到索引文件，但我看到dist文件夹中的索引文件，它声称找不到索引文件。
我得到的错误
Error: Failed to lookup view "index" in views directory "./dist"
at Function.render (/Users/jonathancorrin/Desktop/workspace/fashion-api/node_modules/express/lib/application.js:580:17)
at ServerResponse.render (/Users/jonathancorrin/Desktop/workspace/fashion-api/node_modules/express/lib/response.js:971:7)
at angularRouter (/Users/jonathancorrin/Desktop/workspace/fashion-api/app.js:21:7)
at Layer.handle [as handle_request] (/Users/jonathancorrin/Desktop/workspace/fashion-api/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/Users/jonathancorrin/Desktop/workspace/fashion-api/node_modules/express/lib/router/index.js:317:13)
at /Users/jonathancorrin/Desktop/workspace/fashion-api/node_modules/express/lib/router/index.js:284:7
at Function.process_params (/Users/jonathancorrin/Desktop/workspace/fashion-api/node_modules/express/lib/router/index.js:335:12)
at next (/Users/jonathancorrin/Desktop/workspace/fashion-api/node_modules/express/lib/router/index.js:275:10)
at /Users/jonathancorrin/Desktop/workspace/fashion-api/app.js:63:10
at Layer.handle [as handle_request] (/Users/jonathancorrin/Desktop/workspace/fashion-api/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/Users/jonathancorrin/Desktop/workspace/fashion-api/node_modules/express/lib/router/index.js:317:13)
at /Users/jonathancorrin/Desktop/workspace/fashion-api/node_modules/express/lib/router/index.js:284:7
at Function.process_params (/Users/jonathancorrin/Desktop/workspace/fashion-api/node_modules/express/lib/router/index.js:335:12)
at next (/Users/jonathancorrin/Desktop/workspace/fashion-api/node_modules/express/lib/router/index.js:275:10)
at /Users/jonathancorrin/Desktop/workspace/fashion-api/app.js:53:3
at Layer.handle [as handle_request] (/Users/jonathancorrin/Desktop/workspace/fashion-api/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/Users/jonathancorrin/Desktop/workspace/fashion-api/node_modules/express/lib/router/index.js:317:13)
at /Users/jonathancorrin/Desktop/workspace/fashion-api/node_modules/express/lib/router/index.js:284:7
at Function.process_params (/Users/jonathancorrin/Desktop/workspace/fashion-api/node_modules/express/lib/router/index.js:335:12)
at next (/Users/jonathancorrin/Desktop/workspace/fashion-api/node_modules/express/lib/router/index.js:275:10)
at SendStream.error (/Users/jonathancorrin/Desktop/workspace/fashion-api/node_modules/serve-static/index.js:121:7)
at ZoneDelegate.invokeTask (/Users/jonathancorrin/Desktop/workspace/fashion-api/node_modules/zone.js/dist/zone-node.js:425:31)
我的app.js文件为后端
require('zone.js/dist/zone-node'); require('reflect-metadata'); const compression = require('compression'); const express = require('express'); const ngUniversal = require('@nguniversal/express-engine'); const { provideModuleMap } = require('@nguniversal/module-map-ngfactory-loader'); const { AppServerModuleFactory, LAZY_MODULE_MAP } = require('./dist-server/main.bundle'); const path = require('path'); const cookieParser = require('cookie-parser'); const bodyParser = require("body-parser"); const logger = require('morgan'); // const url
= "https://www.rebargoapp.com"; const devUrl = "http://localhost:4200";
const index = require('./server/routes/index');
// view engine setup function angularRouter(req,res) { res.render('index', {req,res}); }
const app = express();
app.engine('html', ngUniversal.ngExpressEngine({ boostrap: AppServerModuleFactory, providers: [
provideModuleMap(LAZY_MODULE_MAP) ] }));
require('dotenv').config();
app.set('view engine', 'ejs'); app.use(compression()); app.set('views', './dist'); // app.set('view engine', 'ejs');
// uncomment after placing your favicon in /public //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'))); app.use(logger('dev')); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({extended: true}, {limit: '50mb'})); app.use(cookieParser()); app.use(express.static(path.join(__dirname, 'public')));
app.use(function (req,res,next) { res.header("Access-Control-Allow-Origin", (process.env.NODE_ENV === 'production') ? devUrl : devUrl); res.header('Access-Control-Allow-Methods', 'PUT, PATCH, GET, POST, DELETE, OPTIONS'); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); res.setHeader('Access-Control-Allow-Credentials', true); next(); });
app.use(function(req, res, next) { if (process.env.NODE_ENV || process.env.NODE_ENV === 'production') {
if(req.headers["x-forwarded-proto"] === "https"){
return next();
}
return res.redirect('https://'+req.hostname+req.url); } return next(); });
app.use('/', angularRouter);
app.use(express.static(path.join(__dirname, './dist')));
app.use('*', angularRouter);
module.exports = app;
构建时，我可以在我的dist文件夹中看到索引文件。 这里是我运行构建应用程序的命令"build:ssr": "ng build --prod --aot && ng build --prod --app 1 --output-hashing=none --aot && sw-precache --root=dist-server --config=precache-config.js",
这里是我的angular-cli.json文件
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "rebargo-app"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico",
"manifest.json"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
},
{
"name": "test_app",
"root": "src",
"platform": "server",
"outDir": "dist-server",
"assets": [
"assets",
"favicon.ico",
"manifest.json"
],
"index": "index.html",
"polyfills": "polyfills.ts",
"test": "test.ts",
"main": "main.server.ts",
"tsconfig": "tsconfig.server.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"component": {}
}
}
它使用该命令构建客户端和服务器端应用程序。
任何人都可以找出为什么我可以渲染这个应用程序？
***更新我只是想显示我的文件夹结构，所以你可以看到index.html dist 
你需要使用html作为视图引擎，而不是ejs，因为你的expressengine是为'html'指定的，而你的索引文件是index.html
app.set('view engine', 'html');
上一篇: Progressive Angular App With Server Side Rendering Not Building Index