2016-09-22 2 views
6

Я хочу использовать express js w/node js для моего сервера для проекта с угловым 2. Я смотрел учебники для интеграции экспресс-js с угловым кли (я следил за this и this), и мне не повезло. У кого-нибудь есть предложения по тому, как это сделать? В настоящее время у меня есть новый проект w/cli, который говорит, что приложение работает! и хотите попытаться сделать это с помощью выражения, а не с помощью Lite-сервера.

любая помощь приветствуется!Angular 2 cli with Express js

+0

'ng build' и сделать' Express JS' хостом 'dist' каталог. Прошу прощения, не имея более конкретной информации. Я не могу больше помочь. – shusson

+1

Я попробовал это, и он показывает только «loading ...» вещь в index.html. не загружает ли он другие компоненты автоматически? – Armagetin

+0

что-нибудь в консоли браузера? – shusson

ответ

6

этот link работает для меня, но с некоторыми изменениями.

установить угловую-консоль и создать новый проект, то я следую учебнику по ссылке, но с этим изменением:

  1. создать папку с именем node_server
  2. В перспективе НОЙ установки экспресса --save в корневой папке моего проекта. Это добавит сервер, как dependencie, в ваш package.json, не создавая новый на node_server.
  3. Я создаю новый файл в node_server, называемый server.js, с основным экспресс-сервером. Этот сервер возвращает только index.html папки dist.
  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

Вышеупомянутый комментарий работал очень хорошо для меня, просто нужно было внести некоторые изменения в скрипты в package.json, предложенные в этой ссылке.

"сборки: nodeserver": "нг построить & & ср nodeserver/* расст",

"сборки: nodeserver-Prod": «нг построить -prod & & ф nodeserver/* расстояние "

"служит-билд": "NPM пробег сборка: nodeserver & & nodemon DIST/index.js",

"служит-сборке-Prod":" NPM пробег сборка: nodeserver-прод & & nodemon dist /index.js»

У меня есть папка с именем узла сервера , который имеет мой server.js файл, как и выше с маршрутами для angular2 приложения, как указано выше, и некоторые API маршрутов там, и некоторые другие папки node-server, как mysql-запросы, и некоторые файлы, такие как файл config.json

+0

' cp node-server/* dist' не требуется. Вам нужно отредактировать файл tsconfig.json вашего приложения ng2 и добавить запись 'outDir: 'dist''. сборка будет компилироваться непосредственно внутри этого каталога. Если вместо этого у вас есть конфигурационный файл webpack, вместо него должна быть запись 'output: {}'. – gyc

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

gulp будет создавать ваше приложение и перемещать файлы сборки

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 для root.