I am using Angular 2's TypeScript API with webpack to create a browser app. Unfortunately one of my components requires the use of functions in an external .js file from the App Engine Channel API.
Unlike my other .js dependencies I don't think I can precompile this .js file in my webpack bundle because I believe it is dynamically generated.
What's the most appropriate way to load the file into my app and use it? How can I avoid async loading issues?
To extend on what Mark already pointed out:
Yes, you can indeed just load them in the head section of your HTML file above where you load your bundle/Angular 2 project.
And in the component, where you want to use that code you could just write the declaration of the goog variable above your Component class:
declare var goog: any;
And inside your component you can now use all the methods you want, just without auto-completion.
If you want auto-completion you could install the TypeScript definition files via npm: https://www.npmjs.com/package/@types/gae.channel.api
Or just place it in your typings folder right away and reference it at the top of your component file with:
/// <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;
}
}
Its kind of primitive but you can just place your js files in your html file above where you load your bundle.
