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

时间：2016-06-20 09:52:36

标签： angularjs node.js express angular pug

我在Angular 1中有一个带有材料设计的Node Web服务器。现在一些巨大的性能问题让我感到震惊，因此我想转向Angular 2，它应该具有更好的性能。节点服务器当前设置为使用Express with Jade作为渲染引擎，一切都按预期工作。我的问题是，在为Angular 2配置Web服务器时，没有任何内容表示404 GET /index.html。这是事实，但我想像以前一样呈现views/index.jade，而不是新的/index.html文件。

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

  1. 添加5 min quickstart guide。
    2. 中的所有文件和要求
  2. 运行npm install（或类似）以安装所有必需的依赖项。
  3. 在大量文件中摆弄，尝试渲染/views/index.jade而不是/index.html，但我找不到合适的位置来正确配置。

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

    文件夹结构（删除了非重要文件和文件夹）： 

    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.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，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.

2 个答案:

答案 0 :(得分：0)

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

答案 1 :(得分：0)

我怀疑Lite-server存在问题的可能性很大。您是否已将其配置为在启动时使用app / main.js？

此外，您的app / main.ts文件中似乎没有app.listen（PORT）。没有它，你的快递服务器不会响应电话。也许你只是把它从你在这里发布的内容中删除了，我无法告诉你。

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

相关问题
最新问题