google-app-engine - 我应该如何在我的 Angular 2 项目中包含外部 .js 文件？

Question

我正在使用 Angular 2 的 TypeScript API 和 webpack 创建一个浏览器应用程序。不幸的是，我的一个组件需要使用来自 App Engine Channel API 的外部 .js 文件中的函数。 .

与我的其他 .js 依赖项不同，我不认为我可以在我的 webpack 包中预编译这个 .js 文件，因为我相信它是动态生成的。

将文件加载到我的应用程序并使用它的最合适方式是什么？如何避免异步加载问题？

Answer 1

扩展什么Mark已经指出:

是的，您确实可以将它们加载到您加载 bundle/Angular 2 项目上方的 HTML 文件的头部部分。

在组件中，如果您想使用该代码，只需在 Component 类上方编写 goog 变量的声明即可:

declare var goog: any;

在你的组件中，你现在可以使用你想要的所有方法，只是没有自动完成。

如果你想要自动完成，你可以通过 npm 安装 TypeScript 定义文件:https://www.npmjs.com/package/@types/gae.channel.api

或者直接将它放在你的 typings 文件夹中，并在你的组件文件的顶部引用它:

/// <reference path="../typings/gae.channel.api.d.ts" />

gae.channel.api.d.ts:

// Type definitions for GoogleAppEngine's Channel API
// Project: https://developers.google.com/appengine/docs/java/channel/javascript
// Definitions by: vvakame <https://github.com/vvakame>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped

declare namespace goog.appengine {
    export class Channel {
        constructor(token: string);
        open(handler?: Function): Socket;
    }

    export class Socket {
        close(): void;
        onopen: () => void;
        onmessage: (message: any) => void;
        onerror: Function;
        onclose: () => void;
    }
}