服务器端渲染不构建索引的渐进式角度应用程序

时间：2017-11-21 23:01:34

标签： javascript node.js angular serverside-rendering angular-universal

我正在构建一个渐进角度应用程序，它使用角度通用服务器端渲染。我无法让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": {}
  }
}

使用该命令构建客户端和服务器端应用程序。

有人能弄明白为什么我可以渲染这个应用程序吗？

***更新 我只想显示我的文件夹结构，以便您可以在dist enter image description here

中看到index.html

1 个答案:

答案 0 :(得分：0)

您需要使用html作为视图引擎，而不是ejs，因为您的expressengine是为'html'指定的，而您的索引文件是index.html 

app.set('view engine', 'html');
相关问题
最新问题