Question

我有一个非常简单的'hello world'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文件夹，找到一个同名的文件夹。导入，然后在模块的package.json中查找主.d.ts或.ts文件，然后加载，或将查找一个文件与指定的名称相同，或是index.d.ts或index.ts文件。

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

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

tsconfig.json中的

"moduleResolution": "node"

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

Angular2＆amp; Node_modules的TypeScript导入

1 个答案: