node_modules 的 Angular2 和 TypeScript 导入

Question

我有一个非常简单的“hello world”Angular2 应用程序。我还做出了一个明显不合理的决定，即在我的开发项目和 Spring 后端的最终部署文件夹之间使用不同的目录结构。

由于这种差异，我在导入 TypeScript 时遇到了问题，当我尝试在浏览器中打开实际应用程序时，这条线最终产生了 404 错误（无法找到 /angular2/core 库）：

import {Component, View} from 'angular2/core';

长话短说，我最终添加了 /app 文件夹以使一切正常，但我最终修改了我的导入语句，如下所示：

import {Component, View} from '../node_modules/angular2/core';

然而，这最终导致了一些奇怪的行为。出于某种原因，在库路径中指定 ../node_modules 会导致 JS 使用 ajax 调用从头开始加载所有 Angular2 文件，以从 npm_modules/angular2/ 文件夹中检索每个单独的文件，即使这是我的 HTML 标头的一部分：

<script src="/node_modules/angular2/bundles/angular2.dev.js"></script>

当我终于意识到发生了什么时，我将导入语句恢复为

import {Component, View} from 'angular2/core';

这一切都奏效了。 Angular2 现在已完全从上面的脚本标签加载，并且没有文件被额外的 ajax 调用加载。

有人能解释一下是什么原因造成的吗？我认为这是正常行为，但我不明白导入的工作原理以及为什么指定更详细的路径会产生如此大的影响。

Answer 1

TypeScript 的 import 规则遵循与 node.js 相同的约定。如果导入以点开头：

import {Something} from './some/path';

然后它被视为声明导入的文件的相对路径。但是，如果它是绝对路径：

import {Component} from 'angular2/core';

然后假设是一个外部模块，所以Typescript会沿着树上走寻找package.json文件，然后进入node_modules文件夹，找到与import同名的文件夹，然后在模块的package.json 中查找主.d.ts 或.ts 文件，然后加载该文件，或 将查找与指定文件同名的文件，或一个index.d.ts或index.ts文件。

哇，写出来的时候看起来很复杂，而且仍然有一些例外......但总而言之，如果你之前使用过 node.js，那么它的行为方式应该完全相同。

需要注意的一点是，应该设置一个 TypeScript 编译器选项，以便输入分辨率以这种方式工作

在 tsconfig.json 中

"moduleResolution": "node"

现在您问题的第二部分是如何在不使用 ajax 调用的情况下加载它。这是System.js 的一个功能。 index.html 文件中加载的脚本标签会导入一个包，该包将 angular2 包注册到系统。一旦发生这种情况，系统就会知道这些文件并正确地将它们分配给它们的引用。这是一个相当深奥的话题，但是可以在systemjs 或systemjs-builder 的自述文件中找到很多信息。