Angular 2 个带有 Express js 的 cli

Question

我想使用带节点 js 的 express js 作为 angular 2 项目的服务器。我正在查看用于将 express js 与 angular cli 集成的教程（我遵循了 this and this），但我没有运气。有人对如何执行此操作有任何建议吗？目前我有一个带有 cli 的新项目，上面写着 "app works!" 并且想尝试使用 express 来完成它，而不是使用 lite 服务器。

感谢任何帮助！

Answer 1

这个 link 适合我，但有一些变化。

我安装 angular-cli 并创建新项目，然后我按照 link 的教程进行操作，但进行了以下更改：

我创建了一个名为 node_server
在运行 npm install express --save 在我的项目的根文件夹中。这会在您的 package.json 中添加类似依赖项的服务器，而无需在 node_server.
我在 node_server 中创建了一个名为 server.js 的新文件，其中包含一个基本的快速服务器。此服务器仅 returns dist 文件夹的 index.html。
将脚本添加到 package.json，脚本与 link 教程中的相同，但有一处更改，文件名是 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'));
});

希望这对你有用。

Answer 2

以上评论对我来说效果很好，只需要对 link.

中建议的 package.json 中的脚本进行一些调整

"build:nodeserver": "ng build && cp node-server/* dist",

"build:nodeserver-prod": "ng build -prod && cp node-server/* dist",

"serve-build" : "npm run build:nodeserver && nodemon dist/index.js",

"serve-build-prod": "npm run build:nodeserver-prod && nodemon dist/index.js"

我有一个名为 node-server 的文件夹上面有我的 server.js 文件，上面有 angular2 应用程序的路由，还有一些 api 路由，以及节点服务器中的一些其他文件夹，如 mysql-requests 和一些文件，如 config.json file

Answer 3

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 上使用命令进行开发。

Answer 4

我有这个场景；但是，我希望能够：

运行我的 angular CLI 项目使用 ng serve 而不是修改任何 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 以获取所有内容运行ning。然后，我可以去...

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

Angular 2 个带有 Express js 的 cli

Angular 2 cli with Express js

web-services

node.js

express

angular-cli

angular