为Node / Express / Typescript和Angular设置一个项目

Question

我是.NET开发人员（ASP.NET Core等），所以我习惯于使用服务器和客户端代码来处理单个项目。我想对Node / Express（使用Typscript）和Angular做同样的事情。

我已经使用Angular的CLI查看了Angular的教程，并使用了它的生成器查看了Node / Express的教​​程。因此，我了解如何使它们独立工作，但我不确定如何同时使用它们来构建单个项目。

根据经验，我期望这样的事情：

• .git
• node_modules
• client
  • src
  • 与Angular相关的配置
• server
  • src
  • 与Node / Express / Typescript相关的配置
• package.json
• 与项目整体相关的配置

但是，在MEAN堆栈中有许多活动部件，这令人困惑。我不确定在哪里放置各种打字稿文件，配置文件等。以及如何为给定的每个node_modules级别运行开发服务器。

有一些对此存在疑问的问题，或者对此有批评，或者已经过时了（Node世界变化如此之快！）。但是，我想知道的是不同的：

如何在同一项目中设置Node / Express（使用Typescript）和Angular：

• 这样他们就可以提交到同一个git repo
• 所以我可以使用相同的IDE实例处理它们
• 所以我仍然可以使用快速和有角度的脚手架工具（CLI /发电机/等）
• 因此在开发时ng serve和node app服务器仍然可以使用
• （也欢迎任何示例代码或存储库）

Answer 1

您可以使用如下设置：

-client/         // for your angular application (frontend)
-node_modules/   // node modules
-routes/         // route files for your express
-app.js          // your main app
-package.json    // your package.json with all the dependencies and so on

创建一个项目文件夹并运行npm init，它会自动为您创建package.json。然后，您可以通过创建客户端应用ng new client。

然后，您只需git init在项目的根文件夹中运行即可。如果您不想提交项目的某些部分，请使用.gitignore文件。

在节点后端的app.js中，仅需要express和其他相关程序包，例如：

var express = require('express');
var path = require( "path" );
var bodyParser = require('body-parser');
var expressValidator = require('express-validator');
var cors = require('cors');
var app = express();
var port = 65500;
var router = express.Router();
....
..

并定义您的快递路线

var authRouter = require('./routes/auth')(router);
var servicesRouter = require('./routes/services')(router);
....
..

app.use('/auth', authRouter); // Route to authenticate login attempt 
app.use('/services', servicesRouter); // Route to perform other services
....
..
// wildcard:
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname + '/public/index.html'));
});

// INFO: Start the node server */
app.listen(port, () => console.log(`Node's Express ice-dashboard-new is listening on 
Port ${port}..`));

例如，在/ client / src / app / components中，您可以通过CLI通过CLI生成任何组件，ng generate component someComponentName而Angular CLI将为您做所有的事情。（生成.html .css / .scss，.ts和.spec.ts并将其添加到app.modules.ts中）。

同一作品的服务连接的字体后端。就像使用CLI一样ng generate service someServiceName-但请记住，您必须将它们添加到app.module.ts中@ NgModule-declaration的“提供者”中。

如果您还有其他后端资产，只需在应用程序的根文件夹中创建一个文件夹，并在app.js中另外要求它们以使用它们（例如/ config或/ helperz等。）

对于前端资产（例如图像，i18n转换文件等），请使用/ client / src / assets文件夹。

基本上，您的应用程序由两部分组成-节点后端为应用程序提供服务，并为后端操作提供路由，以及角度前端应用程序（html，css / scss＆js），下面是一个小图形来说明该设置，以便于更好地理解。

Nodemon是一个非常方便的工具，该实用程序将监视源中的任何更改并自动重新启动服务器。适合发展。

只需使用nodemon而不是node来运行代码，现在，当代码更改时，您的进程将自动重新启动。要进行安装，请获取node.js，然后从终端-g通过以下选项在全局范围内进行安装：

 npm install -g nodemon

为了更好地理解，请看以下有关其他人如何设置项目的示例：

• Angular 2 Express Starter（Angular 2节点Express）
• Angular Universal Starter（Angular 4节点）
• 角MEAN样板（角2/4节点Express mongodb）