我应该如何在Angular 2项目中包含外部.js文件?

时间:2016-09-01 03:10:45

标签: google-app-engine angular typescript

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

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

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

2 个答案:

答案 0 :(得分:2)

它的原始类型,但你可以将你的js文件放在你加载包的上面的html文件中。

答案 1 :(得分:2)

扩展Mark已经指出的内容:

是的,您确实可以将它们加载到HTML文件的head部分,在您加载bundle / Angular 2项目的位置。

在组件中,您想要使用该代码,您只需在goog类之上编写Component变量的声明:

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;
    }
}