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

【问题标题】：Moving NodeJS server using Express with Jade from Angular 1 to Angular 2使用 Express with Jade 将 NodeJS 服务器从 Angular 1 移动到 Angular 2
【发布时间】：2016-06-20 09:52:36
【问题描述】：

我在 Angular 1 中有一个使用 Material Design 的 Node Web 服务器。现在我遇到了一些巨大的性能问题，因此我想迁移到 Angular 2，它应该有更好的性能。 Node 服务器当前设置为使用 Express 和 Jade 作为渲染引擎，一切都按预期工作。我的问题是，在为 Angular 2 配置 Web 服务器时，没有任何内容显示 404 GET /index.html。这是真的，但我想像以前一样渲染views/index.jade，而不是新的/index.html 文件。

以下是我目前用于升级到 Angular 2 的步骤：

添加来自5 min quickstart guide 的所有文件和要求。
运行npm install（或类似的）来安装所有必需的依赖项。
在大量文件中摆弄以尝试渲染 /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 { }

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 min quickstart guide 中所述。

现在使用 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.

【问题讨论】：

routes/index.js的内容是什么？我猜你没有为它设置/ 路径。
对不起，我忘记了——我现在添加了。我唯一要做的就是在/ 处渲染index。这适用于我的 Angular 1 应用程序，但不适用于 Angular 2 的当前尝试。
那是不可能的。请张贴代码
代码在上面的 routes/index.js: 标题下。它只是使用express.Router() 在index 渲染，没有别的。

标签： angularjs node.js express angular pug

【解决方案1】：

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

【讨论】：

好吧，如果你的意思是去例如my.server.com 而不是浏览器中的my.server.com/index.html 这正是我正在做的。或者你的意思是在某处配置它？如果是这样，我在哪里可以配置？
您将访问 my.server.com。从这个日志16.06.20 11:45:49 404 GET /index.html，我们可以看到浏览器正在请求 my.server.com/index.html，这显然不是您想要的。检查您的浏览器。 @Krøllebølle
肯定不是浏览器的问题。在 Linux 和 Windows 上针对最新的 Chrome、Firefox 和 Edge（仅限 Win）进行了测试。
它产生同样的东西：Cannot Get /.
你的项目是开源的吗？我无法真正复制它@Krøllebølle

【解决方案2】：

我怀疑 lite-server 很可能有问题。您是否将其配置为在启动时使用 app/main.js？

此外，您的 app/main.ts 文件中似乎没有 app.listen(PORT)。否则，您的快递服务器将不会响应呼叫。也许您只是在此处发布的内容中忽略了它，我不知道。

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

【讨论】：