Angular2 &node_modules 的 TypeScript 导入 [英] Angular2 & TypeScript importing of node_modules

问题描述

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

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.

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

Because of this difference, I had an issue with the TypeScript imports, and this line ended up producing 404 errors (unable to find /angular2/core library) when I tried to open the actual app in my browser:

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

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

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 从头开始​​实际加载所有 Angular2 文件，使用 ajax 调用从 npm_modules/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>

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

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 the importing works and why specifying a more detailed path makes such a difference.

推荐答案

TypeScript 的 import 规则遵循与 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';

然后假定它是一个外部模块，因此 Typescript 将沿着树向上查找 package.json 文件，然后进入 node_modules 文件夹，然后找到一个与导入同名的文件夹，然后在模块的package.json中查找主.d.ts或.ts 文件，然后加载该文件，或将查找与指定文件同名的文件，或index.d.ts 或 index.ts 文件.

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_modules folder, 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.

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

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 包注册到系统.一旦发生这种情况，系统就会知道这些文件并正确地将它们分配给它们的引用.这是一个很深的话题，但是可以在 systemjs 的 README 或 的自述文件中找到很多信息href="https://github.com/systemjs/builder" rel="noreferrer">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 的 TypeScript 导入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！