Question

我有一个相当基本的角度应用程序和一个基本快速api设置用于用户授权。每个作品独立一个表达从npm开始开始，角度的东西用gulp开始。（角度来自一个自耕一般的材料角度生成器。如何在不破坏代码结构的情况下有效地连接它们？

当我写这篇文章时，我认为我可能需要将快速的东西注入角部而不是相反的方式。我只是在文件中丢失了一点。

我尝试在快递中使用 src / 文件夹而不是公开，但没有成功。

// 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命令运行它们会很好。

我的应用结构如下。如果您需要查看任何代码，请告诉我，我会发布。为了清洁，我把它留了出来。

.
├── 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

Answer 1

这可能不是你想要的（我并不熟悉gulp）但这对我有用，也许会指出你正确的方向。

制作版本：

我的快速服务器设置与您的相同，我将静态路径直接指向我的dist文件夹。然后我添加了一个指向该文件夹中index.html文件的app.get。这允许您的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'));
    });

然后，我进入了我的角度应用程序包.json并编辑了我的启动命令以运行＆＃34; ng build＆＃34; （我认为你可以参与＆＃34; gulp＆＃34;运行它而不是ng build命令）和节点。现在＆＃34; npm开始＆＃34;将构建应用程序并启动服务器。它为我提供了我的生产应用程序的工作版本。

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

开发版：

我还没试过这个（今天我会这样做并让你知道），但是如果你想让这一切都在一个活跃的开发环境中运行，那么你应该更新任何一个文件能够引用你的＆＃34; src / index.html＆＃34;并在启动命令中使用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",
    ....
}

加入现有的角度应用程序来表达后端

1 个答案: