Angularjs 加入现有angular应用程序到express后端

目前，我有一个相当基本的angular应用程序和一个基本的express api，用于用户授权。每一个独立的工作，一个快速开始与npm开始和角度的东西是开始与吞咽。（角度来自一个yeoman gulp材质角度生成器。如何在不破坏代码结构的情况下有效地连接它们

当我写这篇文章的时候，我想我可能需要把express的东西注入到有角度的部分，而不是相反。我只是有点迷失在文件中

我尝试在express中使用我的src/文件夹而不是public，但没有成功

// express >> app.js
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var session = require('express-session');
var passport = require('passport');
//init mongoose scheemas
require("./models/users");
require("./models/markers");
var index = require('./routes/index');
var api = require('./routes/api');
var auth = require('./routes/auth')(passport);
var mongoose = require('mongoose');
// connect to db
mongoose.connect("mongodb://localhost/comdb");


var app = express();

// view engine setup
app.set('views', path.join(__dirname, '../.tmp'));
app.set('view engine', 'ejs');
// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(session({
  secret: 'keyboard cat'
}));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, '../dist')));

// Passport
app.use(passport.initialize());
app.use(passport.session());

app.use('/', index);
app.use('/auth', auth);
app.use('/api', api);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});

//// Initialize Passport
var initPassport = require('./passportInit');
initPassport(passport);

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});


module.exports = app;

顺便说一句，能够用一个gulp命令运行它们会很好

我的应用程序结构如下。如果你需要查看任何代码，请让我知道，我会发布它。为了clenlyness，我省略了它

.
├── README.md
├── bower.json
├── bower_components
       //removed to save space
├── dist
│   ├── app
│   ├── assets
│   ├── favicon.ico
│   ├── index.html
│   ├── scripts
│   └── styles
├── e2e
│   ├── main.po.js
│   └── main.spec.js
├── gulp
        //removed to save space
├── gulpfile.js
├── karma.conf.js
├── node_modules
        //removed to save space
├── package.json
├── protractor.conf.js
├── server
│   ├── app.js
│   ├── bin
│   ├── models
│   ├── node_modules
│   ├── npm-debug.log
│   ├── package.json
│   ├── passportInit.js
│   ├── public
│   ├── routes
│   └── views
└── src
    ├── app
    ├── assets
    ├── favicon.ico
    └── index.html

---

这可能不是你想要的（我对gulp不太熟悉），但这对我来说很有效，也许会为你指明正确的方向

生产版本：

我的express服务器的设置与您的大致相同，我将静态路径直接指向我的dist文件夹。然后我添加了一个app.get，指向该文件夹中的index.html文件。这允许Angular应用程序运行整个前端

// Point static path to dist
    app.use(express.static(path.join(__dirname, '../dist')));    

// Home route to serve the index file
    app.get('/', (req, res) => {
      res.sendFile(path.join(__dirname, '../dist/index.html'));
    });

然后，我进入angular app package.json并编辑了我的start命令来运行“ng build”（我想你可以在“gulp”中加入子命令来运行它而不是ng build命令）和节点。现在，“npm start”将构建应用程序并启动服务器。它为我提供了一个生产应用程序的工作版本

"scripts": {
    "ng": "ng",
    "start": "ng build && node server.js",
    ....
}

开发版本：

我还没有尝试过这一点（我今天会这么做，并让您知道），但是如果您希望在活动的开发环境中运行这一切，并且随着对任一文件的更改而更新，那么您应该能够引用您的“src/index.html”，并在start命令中使用ng serve和nodemon

Express server/app.js：

// Point static path to dist
    app.use(express.static(path.join(__dirname, 'src')));    

// Home route to serve the index file
    app.get('/', (req, res) => {
      res.sendFile(path.join(__dirname, 'src/index.html'));
    });

Angular package.json：

"scripts": {
    "ng": "ng",
    "start": "ng serve && nodemon server.js",
    ....
}

---

express不会提供你的angular文件吗？我不知道angular可以用express做什么。谢谢你的评论！是的，express应该提供angular。我的问题是，因为我有两个独立的应用程序，所以我不知道如何合并，所以我的express应用程序实际上提供src目录中的angular应用程序。我是新手对此，我认为我可以将我的express应用程序指向angular应用程序的src文件夹，但这不起作用。因此，无论你在app.use（express.static（…）；中放置什么，都将从服务器的根目录中静态提供。此外，你需要调用app.listen（8080）启动你的服务器。好的，在我的例子中，我认为最简单的事情是使用/dist文件夹，因为gulp编译并缩小了/src代码。它会产生错误，我还没有运气。我把整个app.jsI都放进去了。我还意识到我忘了提到我完全删除了一大块express文件。因为所有前端我都删除了public和views文件夹，使得后端变得简单多了。