使用Node/Express/Typescript和Angular设置单个项目

Question

使用Node/Express/Typescript和Angular设置单个项目

node.jsangulartypescriptexpressasp.net-core

6

我是一名.NET开发者（包括ASP.NET Core等）。因此，我习惯于在单个项目中使用服务器和客户端代码。我希望在使用Typscript的Node/Express和Angular中做同样的事情。

我已经完成了Angular使用其CLI以及使用其生成器的教程。因此，我知道如何使它们独立工作，但我不确定如何构建一个同时包含两者的单一项目。

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

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

但是，在MEAN堆栈中有很多移动的部分，这令人困惑。我不确定在哪里放置各种TypeScript文件、配置文件等等。而且，由于node_modules在上一级目录，我也不确定如何运行每个服务器的开发服务器。

关于这个问题已经有现成的问题，但它们都是主观的、批评性的或过时的（Node世界变化如此之快！）。然而，我想知道的是不同的：

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

这样它们可以提交到同一个git仓库中
这样我就可以在同一个IDE实例中处理它们
这样我仍然可以使用express和angular脚手架工具（CLI / generator / etc）
这样在开发时ng serve和node app服务器仍然可以正常工作
（任何示例代码或存储库也将不胜感激）

- lonix

2个回答

4

你提出的方案是完全可以的。

通常情况下，要么将所有服务器文件放在根目录下（如src/、lib/等），并在client/文件夹中包含整个客户端项目；要么有专门的server/和client/文件夹，顶层/根目录下几乎没有内容。

以下是Stephen Grider的全栈Node/React代码库示例（对于Node/Angular也适用）- https://github.com/StephenGrider/FullstackReactCode。他采用前一种方法，将根项目级别用于服务器，并使用单独的client/文件夹。

- Will Garcia

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- iLuvLogix · Accepted Answer

您可以使用以下设置：

-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文件。

在您的Node后端的app.js中，简单地要求表达和其他相关的包，例如：

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路由

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生成任何组件，例如ng generate component someComponentName，Angular CLI会为您完成所有操作（生成.html .css / .scss、.ts和.spec.ts，并将其添加到app.modules.ts）。

同样适用于连接字体与后端的服务。只需使用CLI，例如ng generate service someServiceName，但请记住您必须将它们添加到app.module.ts的@NgModule声明的“providers”中。

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

对于前端资产（例如图像、i18n翻译文件或其他内容），请使用/client/src/assets文件夹。

基本上，您的应用程序由两部分组成-节点后端提供应用程序并提供后端操作的路由和Angular前端应用程序（html、css / scss和js）。以下是一张小图，以更好地理解该设置。

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

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

 npm install -g nodemon

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

Angular 2 Express Starter (使用angular 2、node和express)
Angular Universal Starter (使用angular 4和node)
Angular MEAN Boilerplate (使用angular 2/4、node、express和mongodb)