Angular2 - 客户端需要模块答案

【问题标题】：Angular2 - require module on client sideAngular2 - 客户端需要模块
【发布时间】：2016-01-15 06:28:35
【问题描述】：

在 Node.js / Express / Angular2 / typescript (IDE=Visual Studio) 应用程序的上下文中，我正在尝试将第三方 .js 实用程序（packery）加载到客户端（用于指令） .有人为它做了打字稿定义。 d.ts 文件如下所示：

declare module "packery" {
    interface PackeryOptions {  stuff...  }
    class Packery { stuff .... }
    export = Packery;
}

我参考这个 d.ts 文件，告诉浏览器 .js 打包脚本在哪里，然后像这样导入模块：

import Packery = require('packery');

这编译没有抱怨。但是，在运行时，浏览器会尝试（并且失败）在 http://localhost/packery 找到“packery”，而不是知道 packery 是一个导入的库。这与我在客户端上所做的其他导入语句形成对比，例如：

import {Http, HTTP_PROVIDERS} from 'angular2/http';

哪个有效 - 据我所知，我为它们提供的唯一两条信息也是 d.ts 文件和 .js 文件的位置，就像 packery 一样。但是，我一定是错过了什么。尝试了许多文件位置和链接的组合，但无法正常工作。如何获得到“packery”的正确链接？

谢谢！

【问题讨论】：

正如@Langley 在下面指出的那样 d.ts 文件只是定义文件，它们不包含库本身的任何实际代码。如果您使用有关如何构建应用程序（Webpack/SystemJs/其他）的信息更新您的问题，我们可以提供有关如何加载库的更多帮助
谢谢。我知道 d.ts 只是定义。我的问题如下。该语句既可以编译又可以工作： import {Http, HTTP_PROVIDERS} from 'angular2/http';如果您的 IDE 中有 d.ts，并且在 index.html 中有正确的链接。浏览器不会去“localhost/angular2/http”来尝试获取模块，它以某种方式知道它的正确位置。使用 packery，我还引用了 d.ts 和 index.html 中的正确 .js 链接。它可以编译，但在运行时 require 语句会导致来自“localhost/packery”的负载。必须有额外的映射或链接吗？
关于加载器我没有弄乱默认的角度东西，我的理解是 systemjs 是默认的（我在 index.html 中加载 system.js）。谢谢！
OK 所以你需要在你的系统 js 配置中为你的 .js 库添加一个映射。我现在没有示例，但会尝试挖掘一个
@Zyzle - 这似乎是朝着正确方向迈出的一步。如果我将 map: {packery: 'location of packery js' } 添加到 System.config，它不再尝试从服务器加载 packery。但是，它确实抱怨：“无法解析类的所有参数......确保它们都具有有效的类型或注释”。在我看来，如果客户端正在编译我的客户端打字稿，那么除了 packery .js 文件之外，它还想知道 d.ts 文件在哪里。我使用 /// 参考行告诉我的 IDE，但我还需要以某种方式告诉客户端（或 system.js）吗？

标签： javascript node.js angular angular2-directives

【解决方案1】：

我找到了一个解决方法，并认为我会发布它以防万一它对任何人都有帮助，尽管我仍然对原始问题中提出的设置有困难，即获取以下类型的语句：

import foo = require('foo')

在客户端运行。这些在服务器上的 node.js 中为我工作，但在客户端上，对于通过脚本标签加载的第三方库，我无法让它工作，即使我将映射条目添加到 system.js 配置文件，无论我指向的是 .js 文件还是 d.ts 文件。

无论如何，如果您使用脚本标签加载库，然后在您的 IDE 中将引用路径放在 CLIENT 端代码的顶部，那么会起作用

/// <reference path="foo.d.ts" />

并确保您的 d.ts 文件不声明模块/命名空间，而是直接导出方法等。这让 IDE 可以毫无怨言地编译，并且客户端代码能够访问第三方库。

但是，我不确定做我所做的事情是否更可取/最佳实践，或者是否应该以某种方式配置 System.js。

【讨论】：

【解决方案2】：

类型是 js 库的空定义，不是用类型语言编写的。它们仅在 IDE 提示和内容的开发中有用，在您的应用程序中，您仍将像往常一样使用该库，在 index.html 中添加 js 文件或从其中加载 js 文件。

【讨论】：