Expressを使用して角1から角2までのNodeJSサーバを移動

Question

材料設計を使用して、角度1の作業ノードWebサーバを用意しています。今ではいくつかの巨大なパフォーマンスの問題が私に当たったので、より良いパフォーマンスを持つと思われる角度2に移動したいと考えています。ノードサーバーは現在、レンダリングエンジンとしてJadeでExpressを使用するように設定されており、すべて正常に動作します。私の問題は、WebサーバーをAngular 2に設定すると、何も表示されずに404 GET /index.htmlと表示されることです。これは当てはまりますが、views/index.jadeを以前と同じようにレンダリングしたいのですが、新しい/index.htmlファイルをレンダリングしません。 5 min quickstart guideからすべてのファイルとの要件を追加する

1. ：

   は、ここで私は現在、角度2へのアップグレードに使用している段階です。

2. npm install（または類似のもの）を実行して、必要な依存関係をすべてインストールします。
3. /index.htmlの代わりに/views/index.jadeをレンダリングしようとすると、たくさんのファイルが詰まっていますが、これを正しく設定するための適切な場所を見つけることができません。

ファイルの構造と重要なファイルをリストにします。ファイルを追加する必要がある場合はお知らせください。

フォルダ構造（非重要なファイルやフォルダを削除）：主にapp.jsからコピー

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

アプリ/ main.ts（角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 { } 

ルート/ 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. 

Answer 1

私はそれを知っています。 /index.htmlではなく、/を開いてください。

Answer 2

lite-serverに問題があると思われます。起動時にapp/main.jsを使用するように設定しましたか？

また、app/main.tsファイルにapp.listen（PORT）がないようです。それがなければ、エクスプレスサーバーはコールに応答しません。たぶん、あなたがここに投稿したものの中から抜け出してしまったのかもしれません。

いずれも犯人でない場合は、BrowserSyncがファイルを提供している相対パスを確認してみてください。多分それは、想定されている場所とは異なる場所にあるファイルを探しています。