Angular2&TypeScript导入node_modules

前端之家收集整理的这篇文章主要介绍了Angular2&TypeScript导入node_modules前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个非常简单的’你好世界’Angular2应用程序。在我的开发项目和我的spring后端的最终部署文件夹之间,我也做出了不合理的决定。

由于这种差异,我有一个与TypeScript导入的问题,当我尝试在浏览器中打开实际的应用程序时,这一行最终会产生404错误(无法找到/ angular2 / core library)

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

这么长的故事,我最后添加/应用程序文件夹,使一切正常,但我最后修改我的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调用加载。

有人可以解释是什么原因造成的?我认为这是正常的行为,但我不明白导入是如何工作的,以及为什么指定更详细的路径会产生这样的区别。

TypeScript的导入规则遵循与node.js相同的约定。如果导入以点开头:
import {Something} from './some/path';

然后它被视为从声明导入的文件的相对路径。然而,如果它是绝对的路径:

import {Component} from 'angular2/core';

然后假设它是一个外部模块,所以Typescript将沿着树寻找一个package.json文件,然后进入node_modules文件夹,并找到一个与导入名称相同的文件夹,然后查找包。主要的.d.ts或.ts文件的模块的json,然后加载,或将寻找与指定的名称相同的文件,或index.d.ts或index.ts文件

哇,看起来很复杂,当写出来,还有一些例外在那里…但总而言之,如果你已经使用node.js之前,这应该是完全一样的方式。

需要注意的是,有一个TypeScript编译器选项应该设置为打字分辨率以这种方式工作

在tsconfig.json

"moduleResolution": "node"

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

猜你在找的Angularjs相关文章