Angular Universal (s-s-r) 错误:无法在视图目录中查找视图“索引”
Posted
技术标签:
【中文标题】Angular Universal (s-s-r) 错误:无法在视图目录中查找视图“索引”【英文标题】:Angular Universal (s-s-r) Error: Failed to lookup view "index" in views directory 【发布时间】:2019-06-26 22:38:39 【问题描述】:我想在 aws 上部署我的 Angular 通用应用程序。
据我了解,我只能在弹性 beanstalk 上部署我的应用程序,因为它需要一个 Web 服务器才能运行。 (这意味着没有 S3 部署)。
当我部署我的应用程序时,出现以下错误:
错误:无法在视图目录中查找视图“索引” “/var/app/current/dist/浏览器” 在 Function.render (/var/app/current/server.js:122227:17) 在 ServerResponse.render (/var/app/current/server.js:131120:7) 在 /var/app/current/server.js:138:9 在 Layer.handle [as handle_request] (/var/app/current/server.js:124007:5) 在下一个(/var/app/current/server.js:123755:13) 在 Route.dispatch (/var/app/current/server.js:123730:3) 在 Layer.handle [as handle_request] (/var/app/current/server.js:124007:5) 在 /var/app/current/server.js:123230:22 在参数 (/var/app/current/server.js:123303:14) 在参数 (/var/app/current/server.js:123314:14)
这是我到目前为止所做的:
-
在我的 Angular 项目中,使用命令
npm run build:s-s-r
创建生产版本
创建我的 dist 目录的存档
在 Elastic Beanstalk 上,使用 node.js 创建一个新应用程序并上传我的存档
还有我的server.ts
文件:
import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import enableProdMode from '@angular/core';
// Express Engine
import ngExpressEngine from '@nguniversal/express-engine';
// Import module map for lazy loading
import provideModuleMap from '@nguniversal/module-map-ngfactory-loader';
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/browser');
// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const AppServerModuleNgFactory, LAZY_MODULE_MAP = require('./dist/server/main');
// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
app.engine('html', ngExpressEngine(
bootstrap: AppServerModuleNgFactory,
providers: [
provideModuleMap(LAZY_MODULE_MAP)
]
));
app.set('view engine', 'html');
app.set('views', DIST_FOLDER);
// Example Express Rest API endpoints
// app.get('/api/**', (req, res) => );
// Server static files from /browser
app.get('*.*', express.static(DIST_FOLDER,
maxAge: '1y'
));
// 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 Express server listening on http://localhost:$PORT`);
);
我做错了什么?
感谢您的帮助。
【问题讨论】:
【参考方案1】:使用dist
文件夹而不是dist
文件夹的内容作为存档。
在弹性 beanstalk 配置中设置以下“节点命令”设置。
node dist/server
这应该允许您使用标准 Angular 开箱即用设置在本地和 AWS EB 上运行。
编辑 只是为了提供更多信息,这应该可以解决问题。正如@Kartik Chandra 所指出的,问题出在 server.ts 在线文件中
const distFolder = join(process.cwd(), 'dist/landing/browser');
在你的 prod env 进程上部署时会寻找 dist 文件夹,所以如果你不复制它就会失败。
选项是复制整个 dist 文件夹或更改您的 server.ts,但这会破坏您的本地开发。
【讨论】:
【参考方案2】:同时,我找到了在 Elastic Beanstalk 上部署的解决方案。
在我执行的不同步骤下:
-
在您的 Elastic Beanstalk 应用程序中,通过将节点命令更改为
node dist/server.js
来编辑 Software Configuration
编辑nodejs使用的端口(2个选项):
一个。您可以通过8081简单地编辑server.ts
文件中的端口(对应于nginx默认配置中使用的nodejs端口)
const PORT = process.env.PORT || 8081;
b. 或您可以使用configuration file .ebextensions 编辑您的 nginx 配置,以匹配您的 Angular 通用应用程序中使用的端口(默认为 4000)
【讨论】:
【参考方案3】:代替:
const DIST_FOLDER = join(process.cwd(), 'dist/browser');
写:
const DIST_FOLDER = join(process.cwd(), 'rootpathofServer/dist/browser');
示例:
const DIST_FOLDER = join(process.cwd(), 'root/www/prod/myProject/dist/browser');
root/www/prod/myProject/dist/browser
以上行是指我的项目的路径(构建路径)从 nginx aws 目录中的根目录。
如果不工作,只需控制台 CWD:
console.log('processPath',process.cwd());
在我的情况下它返回 / 只要, 所以完整的路径就像 /root/www/prod/myProject/dist/浏览器, 这是 ('/' + 'root/www/prod/myProject/dist/browser') 对于上面这个例子。
是的,确实 nginx 根目录与本地不同,即它在本地工作正常,部署后在服务器上报错。
解决这个问题花了几天时间,希望对您有所帮助。 主要问题很简单:它无法获取特定位置或目录的索引文件。#LearningNeverEnds
【讨论】:
以上是关于Angular Universal (s-s-r) 错误:无法在视图目录中查找视图“索引”的主要内容,如果未能解决你的问题,请参考以下文章
如何在 Angular 5 (s-s-r with Universal) 中使用 Google Analytics 功能?
Angular Universal 错误 ReferenceError:未定义 MouseEvent