我有一个非常简单的'hello world‘Angular2应用。我还做出了一个明显不合理的决定,在我的开发项目和spring后端的最终部署文件夹之间使用不同的目录结构。
由于这种差异,我在TypeScript导入时遇到了问题,当我试图在浏览器中打开实际的应用程序时,这一行最终产生了404个错误(找不到/angular2/core库):
import {Component, View} from 'angular2/core';长话短说,我最终重新添加了/app文件夹以使一切正常工作,但我最终修改了我的导入语句,如下所示:
import {Component, View} from '../node_modules/angular2/core';然而,这导致了一些奇怪的行为。由于某些原因,在库路径中指定../node_modules会导致JS实际从头开始加载所有Angular2文件,使用ajax调用从npm_modules/angular2/文件夹中检索每个单独的文件,即使这是我的HTML头的一部分:
<script src="/node_modules/angular2/bundles/angular2.dev.js"></script>当我最终意识到发生了什么时,我将import语句恢复为
import {Component, View} from 'angular2/core';一切都奏效了。Angular2现在完全从上面的脚本标记加载,并且没有额外的ajax调用加载任何文件。
有人能解释一下这是什么原因吗?我假设这是正常行为,但我不明白导入是如何工作的,以及为什么指定更详细的路径会有如此大的不同。
发布于 2016-02-03 03:38:31
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文件中的脚本标记导入了一个包,该包向系统注册了angular2包。一旦发生这种情况,系统就会知道这些文件,并正确地将它们分配给它们的引用。这是一个相当深奥的主题,但在systemjs或systemjs-builder的自述文件中可以找到许多信息。
https://stackoverflow.com/questions/35159872
复制相似问题