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 / generator / etc）
因此在开发时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();
....
..

并定义您的express-routes

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中，您可以通过ng generate component someComponentName使用CLI生成任何组件，而Angular CLI将为您做所有的事情。（生成.html .css / .scss，.ts和.spec.ts并将其添加到app.modules.ts中）。

Same for services将字体连接到后端。只需使用ng generate service someServiceName之类的CLI-但请记住，您必须将它们添加到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（角度2节点表示）
Angular Universal Starter（角度为4的节点）
Angular MEAN Boilerplate（角度2/4节点表示mongodb）

Answer 2

您提出的建议非常好。

通常将所有服务器文件夹都放在根级别（src/，lib/等）上，并在其中包含一个包含整个客户端项目的client/文件夹，或者专用的server/文件夹和专用的client/文件夹，但在顶层/根目录级别上几乎没有。

这是Stephen Grider的全栈Node / React代码库的示例（相同的主体适用于Node / Angular）-https://github.com/StephenGrider/FullstackReactCode。他采用前者的方法，通过单独的client/文件夹保留服务器的根项目级别。

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

2 个答案: