使用Express和Jade将NodeJS服务器从Angular 1移动到Angular 2

Question

我在Angular 1中使用材料设计有一个工作的Node Web服务器。 现在我遇到了一些巨大的性能问题，因此我想转到Angular 2，它应该有更好的性能。 当前已将Node服务器设置为将Express与Jade一起用作渲染引擎，并且一切正常。 我的问题是，当为Angular 2配置Web服务器时，没有显示404 GET /index.html 。 的确如此，但是我想像以前一样渲染views/index.jade ，而不是一个新的/index.html文件。

这是我目前用于升级到Angular 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（主要从用于Angular 1的app.js复制）：

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 { }

路由/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，types.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-server很有可能是一个问题。 您是否配置为在启动时使用app / main.js？

另外，您的app / main.ts文件中似乎没有app.listen（PORT）。 否则，您的快递服务器将无法响应呼叫。 也许您只是将其遗漏在此处发布的内容之外，我无法告诉您。

如果这些都不是罪魁祸首，请尝试检查BrowserSync正在提供文件的相对路径。 也许它正在寻找与原本不在的地方的文件。