Angular2＆安培; node_modules的打字稿进口 [英] Angular2 & TypeScript importing of node_modules

问题描述

我碰到我花了一段时间来解决一个问题，所以我想我会问我的同事堆栈overflowers我找不到任何地方的解释。

I came across an issue that took me a while to resolve and I couldn't find an explanation anywhere so I thought I'd ask my fellow stack-overflowers.

所以我有一个非常简单的世界你好angular2应用程序。我也取得了明显不合理的决定与我的开发项目，并在我的春天后端的最终部署文件夹之间不同的目录结构的工作。

So I had a very simple 'hello world' angular2 app. I also made the apparently unreasonable decision to work with different directory structures between my dev project and the final deployment folder on my spring backend.

由于这种差异，我曾与打字稿进口的问题，这行

Because of this difference, I had an issue with the TypeScript imports and this line

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

最终产生404错误（无法找到/ angular2 /核心库）当我试图在我的浏览器中打开应用程序的实际

ended up producing 404 errors (unable to find /angular2/core library) when I tried to open the actual app in my browser.

所以长话短说，我结束了加回了/ app文件夹，使一切工作，但我最终修改我的import语句如下：

So long story short, I ended up adding back the /app folder to make everything work but I ended up modifying my import statements as follows:

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

然而，这竟然引起一些怪异的行为。出于某种原因，在库路径指定../node_modules是导致JS居然从头开始使用Ajax调用来检索即使这是一部分的npm_modules / angular2 /文件夹，每一个单独的文件加载所有Angular2我的文件HTML标题

This, however, turned out to cause some weird behavior. For some reason specifying "../node_modules" in the library paths is causing the JS to actually load ALL Angular2 files from scratch using ajax calls to retrieve each and every individual file from the npm_modules/angular2/ folder even though this was part of my html header

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

当我终于明白这是怎么回事我恢复import语句回

When I finally realized what's going on I reverted the import statement back to

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

和它的所有工作。 Angular2现在从上面的脚本标记完全加载，并且没有文件被越来越多的Ajax调用加载。

and it all worked. Angular2 was now completely loaded from the script tag above and there were no files getting loaded by extra ajax calls.

有人能请解释是什么原因造成的？我认为这是正常的行为，但我不明白怎么做进口工作，为什么指定一个更详细的路径做出这样的差别。

Can someone please explain what is causing this? I assume it's normal behavior but I don't understand how does the importing work and why does specifying a more detailed path make such a difference.

欢呼和感谢！

推荐答案

的导入打字稿的规则遵循相同的node.js中约定如果导入开始以点：

The import rules of TypeScript follow the same convention as node.js. If an import begins with a dot:

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

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

Then it is treated as a relative path from the file that declares the import. If however it is an absolute path:

import {Component} from 'angular2/core';

然后，它被认为是外部模块，所以打字稿会走了树寻找的package.json 文件，然后进入 node_modules 文件夹，找到具有相同名称的进口文件夹，然后看在的package.json .d.ts 或 .TS 文件，然后再加载了，的或的会寻找有作为指定的同一个名字，的或的一个 index.d.ts 或 index.ts <文件/ code>文件。

Then it is assumed to be an external module, so Typescript will walk up the tree looking for a package.json file, then go into the node_modulesfolder, and find a folder with the same name as the import, then looks in the package.json of the module for the main .d.ts or .ts file, and then loads that, or will look for a file that has the same name as the one specified, or an index.d.ts or index.ts file.

哇，这似乎复杂，仍有一些例外情况存在......但是这一切的一切，如果你之前的node.js工作，然后这应该表现得完全一样的方式。

Wow that seems complex when written out, and there are still some exceptions there... But all in all, if you have worked with node.js before then this should behave exactly the same way.

有一点需要注意的是，有应为输入分辨率以这种方式工作，设定的打字稿编译器选项

One thing to note is that there is a TypeScript compiler option that should be set for typing resolutions to work in this way

的在tsconfig.json 的

"moduleResolution": "node"

现在你问题的第二部分，这如何得到加载，而无需使用Ajax调用。这是 System.js 的一个特点。即在加载脚本标记的index.html 文件导入哪些寄存器与系统中的angular2捆绑包。一旦发生这种情况系统知道这些文件并正确地为他们安排引用。这是一个pretty深刻的话题，但很多信息，可以发现无论是在 systemjs ，或的systemjs-builder 。

Now the second part of your question was how does this get loaded without using ajax calls. This is a feature of System.js. The script tag that is loaded in the index.html file imports a bundle which registers the angular2 bundle with System. Once this has happened System knows about these files and correctly assigns them to their references. It's a pretty deep topic but a lot of information can be found either in the README of systemjs, or systemjs-builder.

这篇关于Angular2＆安培; node_modules的打字稿进口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！