2016-09-22 10 views
6

के साथ कोणीय 2 क्ली मैं एंजुलर 2 प्रोजेक्ट के लिए मेरा सर्वर होने के लिए एक्सप्रेस जेएस डब्ल्यू/नोड जेएस का उपयोग करना चाहता हूं। मैं एक्सप्रेस जेएस डब्ल्यू/कोणीय क्ली को एकीकृत करने के लिए ट्यूटोरियल देख रहा था (मैंने this और this का पालन किया) और मुझे कोई भाग्य नहीं था। क्या किसी को यह करने के बारे में कोई सुझाव है? वर्तमान में मेरे पास एक नई परियोजना है जो w/cli बस कुछ है जो कहती है "ऐप काम करता है!" और लाइट सर्वर का उपयोग करने के विरोध में एक्सप्रेस का उपयोग करके इसे करने का प्रयास करना चाहते हैं।

किसी भी मदद की सराहना की है!एक्सप्रेस जेएस

+0

'एनजी बिल्ड' और 'एक्सप्रेस जेएस' को 'dist' निर्देशिका होस्ट करें। मुझे खेद है कि अधिक विशिष्ट जानकारी के बिना मैं उससे ज्यादा मदद नहीं कर सकता। – shusson

+1

मैंने कोशिश की कि यह और यह केवल index.html में "लोडिंग ..." चीज़ दिखाता है। क्या यह स्वचालित रूप से अन्य घटकों को लोड नहीं करता है? – Armagetin

+0

ब्राउज़र कंसोल में कुछ भी? – shusson

उत्तर

6

यह link मेरे लिए काम करता है, लेकिन कुछ बदलावों के साथ।

मैं कोणीय CLI स्थापित करने और नया प्रोजेक्ट बना, तो मैं लिंक के ट्यूटोरियल का पालन करें लेकिन इस के साथ परिवर्तन:

  1. मैं एक्सप्रेस --save स्थापित एक फ़ोल्डर node_server
  2. बुलाया रन NPM में बनाने मेरी परियोजना के रूट फ़ोल्डर में। यह node_server पर नया बनाये बिना आपके package.json में dependencie जैसे सर्वर जोड़ें।
  3. मैं मूल एक्सप्रेस सर्वर के साथ server.js नामक node_server में एक नई फ़ाइल बनाता हूं। यह सर्वर केवल dist फ़ोल्डर के index.html को देता है।
  4. package.json पर ऐसी स्क्रिप्ट जोड़ा गया, स्क्रिप्ट लिंक ट्यूटोरियल में ही कर रहे हैं, लेकिन एक परिवर्तन के साथ, फ़ाइल नाम server.js है नहीं index.js

यह मेरा server.js फ़ाइल है :

const express = require('express'); 
 

 
var app = express(); 
 
var staticRoot = __dirname; 
 

 
app.set('port', (process.env.PORT || 3000)); 
 

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

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

 
app.listen(app.get('port'), function() { 
 
    console.log('app running on port', app.get('port')); 
 
});

मैं यह आपके लिए काम करता है उम्मीद है।

1

उपर्युक्त टिप्पणी मेरे लिए बहुत अच्छी तरह से काम करती है, केवल उस लिंक में सुझाए गए पैकेज.जेसन में लिपियों में कुछ समायोजन करने की आवश्यकता है।

"का निर्माण: nodeserver": "एनजी निर्माण & & सीपी nodeserver/* जिले",

"का निर्माण: nodeserver-prod": "एनजी निर्माण -prod & & सीपी nodeserver/* जिले ",

" की सेवा-निर्माण ":" NPM रन का निर्माण: nodeserver & & nodemon जिले/index.js ",

" की सेवा-निर्माण prod ":" NPM रन का निर्माण: nodeserver-prod & & nodemon dist /index.js "

मैं एक फ़ोल्डर नोड सर्वर जो मेरी server.js की तरह ऊपर मार्गों के साथ angular2 अनुप्रयोग के लिए वहाँ में भी फाइल के रूप में ऊपर, और कुछ एपीआई मार्गों कहा जाता है, और कुछ अन्य फ़ोल्डरों ns-server जैसे mysql-request और config.json फ़ाइल जैसे कुछ फ़ाइलें

+0

' cp node-server/* dist' अनावश्यक है आपको अपने ng2 ऐप की tsconfig.json फ़ाइल को संपादित करने और 'outDir:' dist'' एंट्री जोड़ने की आवश्यकता है। निर्माण सीधे उस डीआईआर के अंदर संकलित होगा। यदि आपके पास वेबपैक कॉन्फ़िगरेशन फ़ाइल है, तो इसके बजाय 'आउटपुट: {}' प्रविष्टि होनी चाहिए। – gyc

0

मैंने अंगुलर 2/4 (सीएलआई के साथ) और एक्सप्रेस सर्वर के लिए एक साधारण स्टार्टर ऐप बनाया है।हो सकता है कि किसी को यह उपयोगी मिल जाएगा:

https://github.com/commercialsuicide/angular2-with-express-starter

0

What I do create 2 folder on is your express server (I am using Express-generator) and 1 is Angular 2 project (Angular cli)

रूट फ़ोल्डर

---> सर्वर

---> NG4

---> gulpfile.js

गल्प आपके ऐप का निर्माण करेगा और फाइलें

var gulp = require('gulp') 
var rename = require("gulp-rename"); 
var deletefile = require('gulp-delete-file'); 
var exec = require('child_process').exec; 
var runSequence = require('run-sequence'); 

gulp.task('build', function (cb) { 
    exec('cd ng4/ && ng build', function (err, stdout, stderr) { 
    cb(err); 
    }); 
}) 

gulp.task('rename',() => { 
    return gulp.src("./ng4/dist/index.html")   
     .pipe(rename("ng4.html")) 
     .pipe(gulp.dest("./server/views")); 
}) 

gulp.task('deletefile', function() { 
    var regexp = /\w*(\-\w{8}\.js){1}$|\w*(\-\w{8}\.html){1}$/; 
    gulp.src(['./server/public/index.html', 
      './ng4/dist/**/*.*']) 
    .pipe(deletefile({reg: regexp,deleteMatch: false})); 
}); 

gulp.task('move', function() { 
    return gulp.src(["./ng4/dist/**/*.*"])  
     .pipe(gulp.dest("./server/public")); 
}); 

gulp.task('default', function(callback) { 
    runSequence('build','rename','move','deletefile',callback)  
}); 

इस तरह आप ng4 ऐप में विकसित हो सकते हैं और रूट पर gulp कमांड चला सकते हैं।

संबंधित मुद्दे