2016-06-12 16 views
5

के साथ कोणीय 2 ऐप चलाना मैं Angular2 (क्लाइंट-साइड) और नोड जेएस (सर्वर-साइड) प्रौद्योगिकियों के साथ एक नई परियोजना शुरू कर रहा हूं।नोड जेएस सर्वर

मैंने node और express का उपयोग करके एक विश्वसनीय API बनाने में कामयाब रहा है। जब विशिष्ट यूआरएल दर्ज किया जाता है, तो मेलिंग जेसन प्रतिक्रिया प्रदर्शित होती है। अब तक सब ठीक है।

अब मैं प्रक्रिया में कोणीय 2 को एकीकृत करने की कोशिश कर रहा हूं। मैंने app.component बनाया है। जब पेज प्रदर्शित किया जाता है, घटक लोड नहीं है और मैं कुछ 404 कोड मिला:

├── 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 

मेरे 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" 
    } 
} 

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 

यहाँ मेरी परियोजना संरचना है

और मेरी अनुक्रमणिका.ts (सर्वर):

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); 

निष्कर्ष करने के लिए, 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> 

जब http://localhost:3000/ लोड हो रहा है, मैं देख रहा हूँ "index.html लोड हो रहा है ..." लेकिन घटक प्रदर्शित नहीं है।

आधिकारिक Angular2 वेबसाइट पर, वे lite-server निर्भरता का उपयोग करते हैं। मुझे लगता है कि मेरे सर्वर में कुछ गड़बड़ है, लेकिन मैं यह नहीं समझ सकता कि इसे कैसे काम करना है। या Express और lite-server का उपयोग कर रीस्टफुल एपीआई को लागू करने का कोई तरीका है?

उत्तर

2

आप जेएस libs और css जैसी स्थिर फ़ाइलों को सेवा देने के लिए एक मिडलवेयर फ़ंक्शन जोड़ना भूल गए। app.get("/", ...) से पहले इस लाइन को जोड़ने से काम करना चाहिए:

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

हाँ मैंने सोचा कि पहले, solu के लिए धन्यवाद वैसे भी! – DavidL

+0

मेरे पास एक संबंधित प्रश्न है। क्या आप टिप्पणी करने के इच्छुक हैं? यहां लिंक है: http://stackoverflow.com/questions/38625483/error-enoent-no-such-file-or-directory-with-angular2-and-express-js – FirstOfMany

0

पथ पैकेज NPM मैं पथ --save

उपयोग शीर्ष

var path = require('path');
पर इस और बाद

var app = express();

 app.use(express.static(path.join(__dirname, 'your-dir-name')));
इस का उपयोग स्थापित करने के बाद