Angular2 w/ Typescript - 客户端/服务器应用程序正确吗？答案

【问题标题】：Angular2 w/ Typescript - Client/Server App the right way?Angular2 w/ Typescript - 客户端/服务器应用程序正确吗？
【发布时间】：2019-02-15 10:21:22
【问题描述】：

我正在努力学习 Angular2（和一般的 Angular），掌握核心概念，并且一直在开发我的第一个“真正的”应用程序。我使用 GitHub 上的一些示例项目和 Angular 网站上的快速入门作为指南，但遇到了一些障碍，我正在寻找一些关于设置目录结构、集成类型和参考节点模块的“正确”方式的建议应用程序。显然，某些方面可能是个人编码偏好，所以我只是在这里寻找一些最佳实践建议。

应用概述：

应用程序有一个服务器端组件，用于连接到本地 SQL 服务器并代理来自客户端的调用以提供要显示的数据。
应用程序有一个客户端组件，用于为页面/模板提供服务并与服务器端通信以调用以检索数据并将其显示在页面上
应用程序使用 gulp 来配置和启动服务器端和客户端（不同的调用 - 例如：gulp start-server / gulp start-client）

我有所有工作的基础知识，所以我的问题并不是关于那个。当我有需要利用的节点模块以及集成这些模块的正确方式/最佳方式时，我的问题就出现了。

假设我的基本目录结构是这样的（基于我用作参考的示例项目）...

- client
  |- public
     |- app
     |- css
     |- lib (some js files)
     |- etc...
     index.html
  |- typings
  client.ts/js

- node_modules
  |- modules installed via npm install

- server
  |- core (contains db-connection)
  |- typings
  server.ts/js

现在，假设我需要并安装了节点模块 Rxjs，并且需要在我的客户端引用它...这就是我不清楚的地方。

我已经看到一些帖子，我应该使用 System.config 的“映射”功能与 index.html 文件中的包功能一起映射到 node_module，但我无法让它工作.应用程序启动，但客户端应用程序组件似乎无法看到它。这几乎就像一个超出范围的问题。（抱歉，我手边没有确切的错误信息）。如果我使用 map，我是否允许/应该将其映射到 node_modules 目录中的主目录，还是应该将所需的打字稿文件放在 Public 的目录结构中？

我还看到一些帖子，您可以将 js 文件移动到说 lib 目录并将其作为 index.html 中的 javascript src 文件引用......但我也没有得到任何乐趣。

我认为部分问题可能与各种 node_modules 本身的需求/依赖关系有关，但我不确定如何处理。

那么，设置这一切并集成我需要的 node_modules 的正确/最佳方法是什么？是否根本不可能从客户端应用程序引用 node_modules 中的模块，我需要将所有 .d.ts/ts/js 文件纳入公共范围？如果是这样，我是否需要调查每个 ts 文件中的引用并将所有内容都带过来？

我知道我在这里可能没有提供全部或完全具体的细节，但我希望你能看到我在这里提出的更高级别的最佳实践问题，并将我推向正确的方向。

【问题讨论】：

标签： angular typescript

【解决方案1】：

这适用于使用 Angular 2 和 SystemJS 设置 Typescript 的任何人。

我假设您已经完成了基本设置（如果没有，请告诉我）。在npm install 之后我通常不会接触模块。这就是我的设置方式（以 Angular 2 和 jQuery 为例）：

对于 Angular 2，安装 package.json 中列出的必要模块 https://angular.io/docs/ts/latest/guide/npm-packages.html
在您的public/ts/main.ts（以具有bootstrap() 函数的为准）中，引用类型定义：/// <reference path="../../node_modules/angular2/typings/browser.d.ts" />

这将允许您import ... from 'angular2/core' 假设您已正确设置 SystemJS。我的 SystemJS 配置：

System.config({
  packages: {
    js: {format: 'register'}
  }
});
System.import('/js/main').then(null, console.error.bind(console));

对于 jQuery（和其他），npm install jquery 和 typings install jquery --ambient（与 Angular 2 不同，类型定义在单独的存储库中）。
再次，查找并引用public/ts/main.ts中的类型定义：
/// <reference path="../../typings/jquery/index.d.ts" />
有两种方法可以加载实际的 jQuery 代码。

1) <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> 在index.html
现在您可以在 Angular 2 代码中使用 $。类型检查应该按预期工作。（不要使用 import * as $ from 'jquery'，因为 SystemJS 会向 /jquery 发出 GET 请求，这可能存在也可能不存在）。

2) 如果你想从node_modules/ 加载jQuery，你需要额外的设置：在你的后端，你需要为你提供node_modules/ 目录。在 ExpressJS 中，您可以使用：
```
app.use(express.static(PROJECT_ROOT_FOLDER + '/node_modules'));
```
然后您需要告诉 SystemJS 向您的 node_modules/ 中的 jquery.js 文件发出 GET 请求，而不仅仅是 /jquery。使用map：
```
System.config({
  map: {
    jquery: '/jquery/dist/jquery.js'
  },
  packages: {
    js: {format: 'register'}
  }
});
System.import('/js/main').then(null, console.error.bind(console));
```
这意味着每次您在代码中 import * as $ from 'jquery'; 时，SystemJS 都会向 /jquery/dist/jquery.js 发出 GET 请求，而不是我们想要的 /jquery。

现在只需 import * as $ from 'jquery' 在您需要的任何地方，一切都会正常运行。
您可以对其他模块（lodash 等）执行上述步骤，前提是它们具有正确的类型定义并在浏览器中工作。

对于示例，您可以查看我的样板文件https://github.com/simonxca/mean2-boilerplate。这是一个 MEAN 堆栈，不包含此处的所有内容，但它可能会有所帮助。希望一切顺利。

【讨论】：