node_modules的Angular2和TypeScript导入

Question

我有一个非常简单的'你好世界'Angular2应用程序。 我做了一个明显不合理的决定，在我的开发项目和我的spring后端的最终部署文件夹之间使用不同的目录结构。

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

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

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

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查找package.json主要.d.ts或.ts文件的模块的package.json ，然后加载它， 或者将查找与指定文件同名的文件， 或 index.d.ts或index.ts文件。

哇，写出来似乎很复杂，但仍有一些例外......但总而言之，如果你之前使用过node.js，那么这应该表现得完全一样。

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

在tsconfig.json中

"moduleResolution": "node"

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