用Jade从角度1到角度2使用Express移动NodeJS服务器

Question

我有一个工作节点web服务器的角度1与材料设计。现在，一些巨大的性能问题袭击了我，因此，我想转到角2，这应该有更好的性能。Node服务器目前被设置为使用Express和Jade作为呈现引擎，一切都按预期工作。我的问题是，当将web服务器配置为角2时，没有任何内容显示为404 GET /index.html。这是真的，但我希望像以前一样呈现views/index.jade，而不是一个新的/index.html文件。

以下是我目前升级到角2的步骤：

1. 从5分钟快速启动指南添加所有文件和要求。
2. 运行npm install (或类似的)来安装所有所需的依赖项。
3. 在许多文件中摆弄，试图呈现/views/index.jade而不是/index.html，但我只是找不到正确配置它的合适位置。

我将列出我的文件结构和我认为是重要的文件。如果需要添加任何文件，请告诉我。

文件夹结构(删除了不重要的文件和文件夹)：

www
├── app <-- Added for Angular 2
│   ├── app.component.js
│   ├── app.component.js.map
│   ├── app.component.ts
│   ├── main.js
│   ├── main.js.map
│   ├── main.ts
│   └── reflect-metadata
├── app.js  <-- Angular 1 main file (now app/main.ts)
├── bin
│   └── www <-- Angular 1: start file run with 'node bin/www'
├── package.json
├── public
│   ├── javascripts
│   │   ├── angular-animate.js
│   │   ├── angular_controllers <-- Angular 1 client side controllers
│   │   │   ├── casesController.js
│   │   │   ├── dataController.js
│   │   │   └── // <snip other controllers>
│   │   ├── angular.js         <-- Angular 1 client side
│   │   ├── angular_js.js      <-- Angular 2 client side
│   │   ├── angular_js.js.map  <-- Angular 2 client side
│   └── stylesheets
│       ├── <snip, not important>
├── routes
│   ├── index.js
│   └── <snip other routes>
├── systemjs.config.js
├── tsconfig.json
├── typings
│   ├── <snip, auto-created>
├── typings.json
└── views
    ├── index.jade
    └── <snip, other jade files>

package.json

{
  "name": "MyWebApp",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "dependencies": {
    "@angular/common": "2.0.0-rc.2",
    "@angular/compiler": "2.0.0-rc.2",
    "@angular/core": "2.0.0-rc.2",
    "@angular/http": "2.0.0-rc.2",
    "@angular/platform-browser": "2.0.0-rc.2",
    "@angular/platform-browser-dynamic": "2.0.0-rc.2",
    "@angular/router": "2.0.0-rc.2",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.2",
    "angular": "^1.5.6",
    "angular-animate": "^1.5.6",
    "angular-aria": "^1.4.8",
    "angular-bootstrap": "^0.12.2",
    "angular-material": "http://github.com/angular/bower-material/tarball/v1.0.9",
    "angular-sanitize": "^1.5.6",
    "angular2-in-memory-web-api": "0.0.12",
    "body-parser": "~1.12.0",
    "bootstrap": "^4.0.0-alpha.2",
    "bunyan": "^1.3.5",
    "cookie-parser": "~1.3.4",
    "core-js": "^2.4.0",
    "debug": "~2.1.1",
    "es6-shim": "^0.35.1",
    "express": "^4.12.4",
    "forever-monitor": "^1.6.0",
    "graceful-fs": "^3.0.8",
    "jade": "~1.9.2",
    "jquery": "^2.1.4",
    "jquery-ui": "^1.10.5",
    "jsdom": "^5.4.1",
    "lodash": "^3.9.3",
    "moment": "^2.10.6",
    "morgan": "~1.5.1",
    "node-inspector": "^0.10.2",
    "node-sass": "^3.7.0",
    "node-sass-middleware": "^0.9.8",
    "nodemailer": "^2.3.0",
    "pg": "^4.3.0",
    "pg-promise": "^1.2.3",
    "phantomcss": "^0.10.4",
    "prettydiff": "^1.13.6",
    "promise": "^7.0.1",
    "pug": "^0.1.0",
    "reflect-metadata": "^0.1.3",
    "request": "^2.62.0",
    "resemblejs": "^1.3.1",
    "restify": "^3.0.2",
    "rxjs": "^5.0.0-beta.6",
    "serve-favicon": "~2.2.0",
    "systemjs": "0.19.27",
    "tether": "^1.1.1",
    "zone.js": "^0.6.12"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "gulp-jade": "^1.1.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings": "^1.0.4"
  }
}

app/main.ts (主要是从app.js中复制的，用于角度1):

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var sassMiddleware = require('node-sass-middleware');
var zone = require('zone');
var reflectmetadata = require('reflect-metadata');

var routes = require('../routes/index');
// <snip, vars for other routes>

var app = express();

// view engine setup
app.set('views', path.join(__dirname, '..', 'views'));
app.set('view engine', 'jade');

// Add serving of static files from folder 'public'.
app.use(express.static(path.join(__dirname, '..', 'public')));

// Working for Angular 1 with Express/Jade    
app.use('/', routes);
// <snip, other routes)

// <snip error handlers and other stuff>

module.exports = app;

app/app.components.ts:

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',             <-- Is this important?
  template: '../views/index.jade' <-- I have tried multiple paths here.
})
export class AppComponent { }

routes/index.js:

var express = require('express');
var router = express.Router();

router.get('/', function(req, res) {
  res.render('index'); // Also tried '../viwes/index', but it made no difference.
});

module.exports = router;

tsconfig.json、systemjs.config.json、typings.json和类似的文件就像在5分钟快速启动指南上描述的那样。

使用npm start运行此设置(请参阅package.json)将在浏览器中给出消息Cannot GET /。我的设置有什么问题吗？控制台输出如下：

me@mycomp:~/www$ npm start

> MyWebApp@0.0.0 start /home/me/www
> tsc && concurrently "npm run tsc:w" "npm run lite" 

[0] 
[0] > MyWebApp@0.0.0 tsc:w /home/me/www
[0] > tsc -w
[0] 
[1] 
[1] > MyWebApp@0.0.0 lite /home/me/www
[1] > lite-server
[1] 
[1] Did not detect a `bs-config.json` or `bs-config.js` override file. Using lite-server defaults...
[1] ** browser-sync config **
[1] { injectChanges: false,
[1]   files: [ './**/*.{html,htm,css,js}' ],
[1]   watchOptions: { ignored: 'node_modules' },
[1]   server: { baseDir: './', middleware: [ [Function], [Function] ] } }
[1] [BS] Access URLs:
[1]  -------------------------------------
[1]        Local: http://localhost:3003
[1]     External: http://192.168.1.1:3003
[1]  -------------------------------------
[1]           UI: http://localhost:3004
[1]  UI External: http://192.168.1.1:3004
[1]  -------------------------------------
[1] [BS] Serving files from: ./
[1] [BS] Watching files...
[1] 16.06.20 11:45:49 404 GET /index.html
[1] 16.06.20 11:45:49 404 GET /favicon.ico
[1] [BS] File changed: app/app.component.js
[1] [BS] File changed: app/main.js
[0] 11:45:49 AM - Compilation complete. Watching for file changes.

Answer 1

我知道这个。您应该打开/而不是/index.html。

Answer 2

我怀疑这很有可能是lite服务器的问题。您是否将其配置为在引导时使用app/main.js？

而且，看起来应用程序/main.ts文件中没有app.listen(端口)。否则，您的快速服务器将不会响应呼叫。也许你只是把它忘在这里了，我看不出来。

如果两者都不是罪魁祸首，请尝试检查BrowserSync提供文件的相对路径。也许它是在另一个地方寻找文件，而不是它应该在的地方。