Question

我想使用快速js w / node js作为角度2项目的服务器。我正在寻找整合快速js w / the angular cli的教程（我跟着this和this），我没有运气。有没有人对如何做到这一点有任何建议？目前我有一个新的项目w / cli只是说'＃app; app工作！＆＃34;并且想要尝试使用express而不是使用lite服务器。

任何帮助表示赞赏！

Answer 1

此link对我有用，但有一些变化。

我安装了angular-cli并创建了新项目，然后我按照链接的教程进行了修改：

我创建了一个名为node_server
在运行npm install express --save在我项目的根文件夹中。这可以在package.json中添加像dependencie这样的服务器，而无需在node_server上创建新的。
我在node_server中创建了一个名为server.js的新文件，其中包含一个基本的快速服务器。此服务器仅返回dist文件夹的index.html。
将脚本添加到package.json，链接教程中的脚本相同，但只需更改一次，文件名为server.js而不是index.js

这是我的server.js文件：

＆＃13;

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

＆＃13;

我希望这适合你。

Answer 2

以上评论对我来说效果很好，只需要对该链接中建议的package.json中的脚本进行一些调整。

“build：nodeserver”：“ng build＆amp;＆amp; cp node-server / * dist”，

“build：nodeserver-prod”：“ng build -prod＆amp;＆amp; cp node-server / * dist”，

“serve-build”：“npm run build：nodeserver＆amp;＆amp; nodemon dist / index.js”，

“serve-build-prod”：“npm run build：nodeserver-prod＆amp;＆amp; nodemon dist / index.js”

我有一个名为node-server的文件夹我的server.js文件与上面的angular2 app一样，如上所述，还有一些api路由，节点服务器中的一些其他文件夹，如mysql-requests和一些文件，如config.json文件

Answer 3

我创建的2个文件夹是你的快递服务器（我正在使用 Express-generator）和1是Angular 2项目（Angular cli）

根文件夹

---＆gt;服务器

---＆gt; ng4

---＆GT; 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应用程序中开发并在root上运行gulp命令。

Answer 4

我有这种情况；但是，我希望能够：

使用ng serve运行我的有角度的CLI项目，而不用修改任何gulp任务/进程，而不必每次都运行ng build
具有服务器端API，它独立于前端在其自己的端口上进行响应-这样，就可以使用微服务架构模式，并且可以分离前端和后端之间的问题。

为此，我使用了concurrently和下面的package.json脚本修改

  "scripts": {
    "start": "concurrently \"npm run-script start-frontend\" \"npm run-script start-backend\"",
    "start-frontend": "ng serve",
    "start-backend": "node index.js",
    ...

我的后端index.js文件是样板文件，但看起来像这样...

const express = require('express');
const router = express.Router();

const app = express();
const PORT = process.env.PORT || 3000;

router.get('/', (req, res) => {
    res.json({ Hello: 'World' });
});

app.use('/api', router);
app.listen(PORT, function() {
    console.log(`API running on port ${PORT}`);
});

现在，当我想运行该应用程序时，我可以键入npm start来使所有程序运行。然后，我可以去...

http://localhost:3000/api/访问后端
http://localhost:4200/访问前端

Angular 2 cli with Express js

4 个答案: