代码之家 › 专栏 › 技术社区 › Johan Rin

角度通用(SSR)错误:在视图目录中查找视图“索引”失败

angular-universal amazon-elastic-beanstalk angular

Johan Rin · 技术社区 · 5 年前

我想在aws上部署我的角度通用应用程序。

据我所知,我只能在ElasticBeanstalk上部署我的应用程序,因为它需要一个web服务器来运行。(这意味着没有部署S3)。

部署应用程序时,出现以下错误:

错误:在视图目录中查找视图“索引”失败 “/var/app/current/dist/browser” 在Function.render(/var/app/current/server.js:122227:17) 在ServerResponse.render(/var/app/current/server.js:131120:7) at/var/app/current/server.js:138:9 在Layer.handle[作为handle_请求](/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[作为handle_请求](/var/app/current/server.js:124007:5) at/var/app/current/server.js:123230:22 at参数(/var/app/current/server.js:123303:14) at参数(/var/app/current/server.js:123314:14)

现在我所做的是:

在我的角度项目中,使用命令创建生产构建 npm run build:ssr
创建我的dist目录的存档
在ElasticBeanstalk上,使用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}`);
});

我做错什么了?

谢谢你的帮助。

0 回复 | 直到 5 年前

Picachieu 5 年前

使用 dist 文件夹作为存档而不是 距离 文件夹。

在弹性beanstalk配置中设置以下“node command”设置。

node dist/server

这应该允许您在本地和AWS EB上以标准的角度开箱即用设置运行。

Johan Rin 5 年前

同时,我找到了在弹性豆茎上部署的解决方案。

以下是我所做的不同步骤:

在你的 弹性豆茎应用 ,编辑 Software Configuration 通过更改Node命令 node dist/server.js
编辑nodejs使用的端口(2个选项):

a.您只需在 server.ts 归档依据 八千零八十一 (对应于nginx默认配置中使用的nodejs端口)
```
const PORT = process.env.PORT || 8081;
```
乙。或者您可以使用 configuration file .ebextensions 匹配angular universal应用程序中使用的端口(默认为4000)