Я хочу использовать express js w/node js для моего сервера для проекта с угловым 2. Я смотрел учебники для интеграции экспресс-js с угловым кли (я следил за this и this), и мне не повезло. У кого-нибудь есть предложения по тому, как это сделать? В настоящее время у меня есть новый проект w/cli, который говорит, что приложение работает! и хотите попытаться сделать это с помощью выражения, а не с помощью Lite-сервера.
любая помощь приветствуется!Angular 2 cli with Express js
ответ
этот link работает для меня, но с некоторыми изменениями.
установить угловую-консоль и создать новый проект, то я следую учебнику по ссылке, но с этим изменением:
- создать папку с именем node_server
- В перспективе НОЙ установки экспресса --save в корневой папке моего проекта. Это добавит сервер, как dependencie, в ваш package.json, не создавая новый на node_server.
- Я создаю новый файл в node_server, называемый server.js, с основным экспресс-сервером. Этот сервер возвращает только index.html папки dist.
- Добавлены скрипты для 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'));
});
Я надеюсь, что это работает для вас.
Вышеупомянутый комментарий работал очень хорошо для меня, просто нужно было внести некоторые изменения в скрипты в 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
' cp node-server/* dist' не требуется. Вам нужно отредактировать файл tsconfig.json вашего приложения ng2 и добавить запись 'outDir: 'dist''. сборка будет компилироваться непосредственно внутри этого каталога. Если вместо этого у вас есть конфигурационный файл webpack, вместо него должна быть запись 'output: {}'. – gyc
Я создал простую стартовую программу для Angular 2/4 (с CLI) и Express-сервером.Может быть, кто-то найдет это полезным:
https://github.com/commercialsuicide/angular2-with-express-starter
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.
- 1. Bundeled angular 2 app with express
- 2. Сохранение CSS из JS в Angular 2/Angular-CLI
- 3. Угловой 2 установлен через CLI с Express
- 4. Использование Packery with Angular 2
- 5. PapaParse with Angular JS
- 6. Bootstrap Angular 2 with Angular 1
- 7. Angular 2, Webpack, Express, HMR
- 8. Angular 2 with TypeScript
- 9. OneSignal with Angular 2
- 10. Angular JS navigate with $ location
- 11. Multi Selection with Angular js
- 12. Auth0-js с Angular 2 (RC5), Webpack и CLI
- 13. Импорт внешней библиотеки JS в Angular 2 CLI @NgModule
- 14. Sass not compiling with angular-cli
- 15. Ajax call with angular js
- 16. Папка Upload with Angular Js
- 17. Bootstrap Modal with Angular 2
- 18. Mocking Components with Angular 2
- 19. Angular 2 with Twitter Bootstrap
- 20. Angular 2 translations with Webpack
- 21. ng-src in Angular 2 js with Dart
- 22. Oauth 2 popup with Angular 2
- 23. Angular 2 cli - Broccoli не найден модуль
- 24. MEAN Technology (mongodb, express js, angular js, node js)
- 25. MEAN stack with Angular 2 - tutorials
- 26. Angular 2 RC 4 ошибки компилятора-cli
- 27. Как запустить Angular 2 (cli) без сборки?
- 28. SASS Mixins с Angular 2 CLI
- 29. Использование Angular 2 с электронным (угловым CLI)
- 30. Angular 2 - angular-cli - Иконка Bootstrap Hamburguer не работает
'ng build' и сделать' Express JS' хостом 'dist' каталог. Прошу прощения, не имея более конкретной информации. Я не могу больше помочь. – shusson
Я попробовал это, и он показывает только «loading ...» вещь в index.html. не загружает ли он другие компоненты автоматически? – Armagetin
что-нибудь в консоли браузера? – shusson