Uruchamianie aplikacji Angular2 z serwerem Node Js

Rozpoczynam nowy projekt z wykorzystaniem technologii Angular2 (po stronie klienta) i Node JS (po stronie serwera).Uruchamianie aplikacji Angular2 z serwerem Node Js

Udało mi się utworzyć RESTful API przy użyciu node i express. Po wprowadzeniu określonego adresu URL wyświetlana jest pasująca odpowiedź Json. Jak na razie dobrze.

Teraz próbuję zintegrować Angular 2 w tym procesie. Stworzyłem app.component. Gdy wyświetlana jest strona, składnik nie jest załadowany i mam jakieś 404 kodów:

Failed to load resource: 404 (not found) http://localhost:3000/node_modules/core-js/client/shim.min.js 
... 
Failed to load resource: 404 (not found) http://localhost:3000/systemjs.config.js

Tu jest mój struktury projektu:

├── App 
| └── app.component.ts    //copied from Angular2/get-started 
| └── main.ts       // copied from Angular2/get-started 
├── dist         //contains generated JS files 
├── node_modules 
├── server        // contains Server Typescript files 
├── index.html       // copied from Angular2/get-started 
├── index.ts        // server entry point 
├── package.json 
├── systemjs.config.js 
├── tsconfig.json 
├── typings.json

Moja package.json:

{ 
    "main": "index.js", 
    "scripts": { 
    "start": "tsc && concurrently \"npm run tsc:w\" \"node dist/js/index.js\" ", 
    "postinstall": "typings install", 
    "tsc": "tsc", 
    "tsc:w": "tsc -w", 
    "typings": "typings" 
    }, 
    "dependencies": { 

    "@angular/common": "2.0.0-rc.1", 
    "@angular/compiler": "2.0.0-rc.1", 
    "@angular/core": "2.0.0-rc.1", 
    "@angular/http": "2.0.0-rc.1", 
    "@angular/platform-browser": "2.0.0-rc.1", 
    "@angular/platform-browser-dynamic": "2.0.0-rc.1", 
    "@angular/router": "2.0.0-rc.1", 
    "@angular/router-deprecated": "2.0.0-rc.1", 
    "@angular/upgrade": "2.0.0-rc.1", 

    "systemjs": "0.19.27", 
    "core-js": "^2.4.0", 
    "reflect-metadata": "^0.1.3", 
    "rxjs": "5.0.0-beta.6", 
    "zone.js": "^0.6.12", 
    "angular2-in-memory-web-api": "0.0.11", 
    "bootstrap": "^3.3.6", 

    "express": "^4.13.4", 
    "mysql": "^2.5.4" 
    }, 
    "devDependencies": { 
    "concurrently": "^2.0.0", 
    "typescript": "^1.8.10", 
    "typings": "^1.0.4" 
    } 
}

I mój index.ts (serwer):

var express = require('express'); 
var app = express(); 
var path = require('path'); 

var __projectRoot = __dirname + '/../../'; 

app.get('/', function (req, res) { 
    res.sendFile(path.join(__projectRoot + '/index.html')); 
}); 

console.log('Server up and running on http://localhost:3000/'); 
app.listen(server_port);

Podsumowując, index.html:

<html> 
<head> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <title>Angular 2 QuickStart</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- 1. Load libraries --> 
    <!-- Polyfill(s) for older browsers --> 
    <script src="node_modules/core-js/client/shim.min.js"></script> 
    <script src="node_modules/zone.js/dist/zone.js"></script> 
    <script src="node_modules/reflect-metadata/Reflect.js"></script> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 
    <!-- 2. Configure SystemJS --> 
    <script src="systemjs.config.js"></script> 
    <script> 
     System.import('app').catch(function (err) { 
      console.error(err); 
     }); 
    </script> 
</head> 
<!-- 3. Display the application --> 
<body> 
<h1>index.html</h1> 
<my-app>Loading...</my-app> 
</body> 
</html>

Podczas ładowania http://localhost:3000/ widzę "index.html Loading ...", ale element nie jest wyświetlany.

Na oficjalnej stronie Angular2 używają zależności lite-server. Domyślam się, że mój serwer ma coś nie tak, ale nie wiem, jak to zrobić. Czy istnieje sposób wdrożenia RESTful API przy użyciu Express i lite-server?

Źródło

2016-06-12 DavidL

Nie pamiętasz o dodaniu funkcji oprogramowania pośredniego do obsługi plików statycznych, takich jak js libs i css. Dodanie tej linii przed app.get("/", ...) powinno działać:

app.use(express.static(__projectRoot));

Źródło

2016-06-12 17:29:31 Zen

Tak, wymyśliłem to wcześniej, dzięki za solu w każdym razie! – DavidL

Mam powiązane pytanie. Czy chcesz skomentować? Oto link: http://stackoverflow.com/questions/38625483/error-enoent-no-such-file-or-directory-with-angular2-and-express-js – FirstOfMany

po zainstalowaniu pakiecie path npm í ścieżkę flagą --save

stosowania tego na górze

var path = require('path');

i wykorzystują to po

var app = express();

 app.use(express.static(path.join(__dirname, 'your-dir-name')));

Źródło

2017-01-13 16:04:22

Uruchamianie aplikacji Angular2 z serwerem Node Js

Odpowiedz

Powiązane problemy