Angular2 w/Typescript-客户端/服务器应用程序是否正确？

我正在攻克Angular2（一般来说是Angular2）的核心概念，并一直在开发我的第一个“真正”应用程序。我正在使用GitHub上的一些示例项目和Angular站点上的quickstart作为指导，但遇到了一些障碍，我正在寻找一些关于“正确”方法的建议，以在应用程序中设置目录结构、集成打字和引用节点模块。显然，有些方面可能是个人编码偏好，所以我只是在这里寻求一些最佳实践建议

应用程序概述：

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

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

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

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

我已经看到一些帖子，我应该使用System.config的“map”功能与index.html文件中的packages功能一起映射到node_模块，但我无法实现这一点。应用程序启动，但客户端应用程序组件似乎无法看到它。这几乎像是一个超出范围的问题。（对不起，我手边没有确切的错误消息）。如果我使用map，我是否允许/应该将它映射到node_modules目录中的主目录，还是应该将所需的typescript文件放在Public的目录结构中

我也看到过一些帖子，你可以把js文件移动到lib目录，然后在index.html中将它作为javascript src文件引用……但是我也没有得到任何乐趣

我相信问题的一部分可能与各个node_模块本身中的requires/dependency有关，但我不确定如何处理这个问题

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

---

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

这是为任何使用Angular 2和SystemJS设置Typescript的人准备的

我假设您的基本设置正常（如果没有，请告诉我）。在

npm安装之后，我通常不触摸模块。这就是我设置它的方式（使用Angular 2和jQuery作为示例）：

对于Angular 2，安装package.json中列出的必要模块

在
public/ts/main.ts
（以具有
bootstrap（）
函数的为准）中，引用类型定义：
/

这将允许您
导入。。。从“angular2/core”
开始，假设您已正确设置SystemJS。我的SystemJS配置：


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


对于jQuery（和其他），
npm安装jQuery
和
打字安装jQuery--ambient
（与Angular 2不同，类型定义在单独的repo中）

同样，在
public/ts/main.ts
中查找并引用类型定义：
//

有两种方法可以加载实际的jQuery代码。


1） 
在
index.html


现在您可以在Angular 2代码中使用
$
。类型检查应按预期工作。（不要将
import*作为$from'jquery'
使用，因为SystemJS将向
/jquery
发出GET请求，该请求可能存在，也可能不存在）。


2） 如果您想从
节点\u模块/
加载jQuery，则需要额外的设置：在后端，您需要为
节点\u模块/
目录提供服务。在ExpressJS中，您可以使用以下方法执行此操作：

app.use(express.static(PROJECT_ROOT_FOLDER + '/node_modules'));

然后，您需要告诉SystemJS向
节点\u模块/
中的
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));

这意味着每次从“jquery”导入*时，
as$
在您的代码中，SystemJS将向
/jquery/dist/jquery.js
发出GET请求，而不是我们想要的
/jquery
。


现在只要
import*作为$from'jquery'
从任何需要的地方导入，一切都应该正常

您可以对其他模块（lodash等）执行上述步骤，前提是它们具有正确的类型定义并在浏览器中工作

你可以看看我的样本。这是一个平均堆栈，并不包含这里的所有内容，但它可能会有所帮助。希望一切顺利

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