サーバーサイドレンダリングでプログレッシブな角型アプリケーションを構築しない

Question

サーバー側のレンダリングに角型ユニバーサルを使用するプログレッシブな角度アプリを構築しました。私はSSRを稼働させるのに問題があります。このアプリはpostgresに接続されており、バックエンドでexpress/nodeを使用しています。正確な問題は、サーバーを実行しているときにアプリケーションをロードできないことです。私は、インデックスファイルを見つけることができないが、私は見つけることができない主張であるdistフォルダ内のインデックスファイルを見ているというエラーが表示されます。

エラー私はバックエンド

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フォルダにインデックスファイルを見ることができるため

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ファイルを取得しています。ここで私は"build:ssr": "ng build --prod --aot && ng build --prod --app 1 --output-hashing=none --aot && sw-precache --root=dist-server --config=precache-config.js",

そして、ここではそのコマンドを使用して、クライアント側とサーバー側のアプリケーションの両方を構築し、私のアンギュラ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": {} 
    } 
} 

あるアプリケーションを構築するために実行するコマンドがあります。

誰でもこのアプリケーションをレンダリングできるのですか？

***私はちょうどあなたがあなたのexpressengineが指定されているので、あなたは、代わりにEJSの、ビューエンジンとしてHTMLを使用する必要がdistの中

Answer 1

をindex.htmlのを見ることができるように、私のフォルダ構造を見せたかった 更新'html'の場合、インデックスファイルはindex.htmlです。

app.set('view engine', 'html');