Express를 사용하여 Express를 사용하여 Angular 1에서 Angular 2로 노드를 이동하는 노드

Question

Material 디자인을 사용하여 노드 1 웹 서버를 Angular 1로 사용하고 있습니다. 이제 몇 가지 큰 성능 문제가 나에게 타격을 입 혔으므로 더 나은 성능을 제공해야하는 Angular 2로 이동하려고합니다. 노드 서버는 현재 렌더링 엔진으로 Jade와 함께 Express를 사용하도록 설정되었으며 모든 것이 예상대로 작동합니다. 내 문제는 Angular 2 웹 서버를 구성 할 때 아무 것도 렌더링되어 404 GET /index.html이라고 말합니다. 사실이지만 이전에 views/index.jade을 렌더링하고 새로운 /index.html 파일을 렌더링하지 않습니다. 5 min quickstart guide에서 모든 파일과 요구 사항을 추가

1. :

   다음은 내가 현재 각도 2로 업그레이드하는 데 사용한 단계입니다.

2. 필요한 종속성을 모두 설치하려면 npm install (이상)을 실행하십시오.
3. 대신 /views/index.jade을 렌더링하려고 시도하는 파일을 많이 볼 수 있지만 제대로 구성 할 수있는 적절한 위치를 찾을 수 없습니다.

필자는 파일 구조와이 파일에 대해 중요하다고 생각되는 파일을 나열합니다. 파일을 추가해야하는지 알려주세요.

폴더 구조 (비 중요 파일 및 폴더 제거) :

{ 
    "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이 (주로 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 각도 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.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가 파일을 제공하는 상대 경로를 확인하십시오. 어쩌면 다른 곳에서 파일을 찾고있을 수도 있습니다.