Update: I've decided to keep the previous answer below, despite its embarrassing nature. Surprisingly, setting up and utilizing the latest version of the Phoenix JS Client with Angular 2 was much simpler than expected, and my confusion led me astray.
The Phoenix JS client is now available as an npm package, accessible here. To install it, use npm install --save phoenix. Then include it as an additional dependency. In my setup using SystemJS, all I had to do was add the necessary configuration:
import { join } from 'path';
import { SeedConfig } from './seed.config';
import { InjectableDependency } from './seed.config.interfaces';
export class ProjectConfig extends SeedConfig {
PROJECT_TASKS_DIR = join(process.cwd(), this.TOOLS_DIR, 'tasks', 'project');
constructor() {
super();
let additional_deps: InjectableDependency[] = [
{src: 'phoenix/priv/static/phoenix.js', inject: 'libs'}
];
const seedDependencies = this.NPM_DEPENDENCIES;
this.NPM_DEPENDENCIES = seedDependencies.concat(additional_deps);
}
}
With this setup, the Phoenix JS client is now globally available, requiring only a declare var in the Angular 2 service typescript file where it will be used. This is where I initially made a crucial error by trying to directly access Socket using declare var Socket: any, resulting in the error Socket is undefined. However, this thread pointed me in the right direction: when using the transpiled ES5 version (rather than ES6), you must use Phoenix.Socket due to namespacing.
Here's how my revised service looks like:
import { Injectable } from '@angular/core';
declare var Phoenix: any;
@Injectable()
export class PhoenixChannelService {
socket: any;
constructor() {
this.socket = new Phoenix.Socket("ws://localhost:4000/socket", {
logger: ((kind, msg, data) => { console.log(`${kind}: ${msg}`, data) }),
transport: WebSocket
});
this.socket.connect();
}
}
Everything is functioning perfectly now.
If you prefer not to install the client through npm, there is a more basic method: simply grab the latest version of the JS Client from GitHub under /priv/static, store it with your static assets, and include it directly in your index.html:
<script src="/path/to/static/js/phoenix.js"></script>
Everything else remains unchanged.
Note: For those interested in using type definitions with Typescript, consider checking out this npm package as a starting point, although it may be slightly outdated.
Previous outdated response: Initially, I struggled with finding a solution. Since all examples provided were in ES6, I attempted including the transpiled ES5 version directly into my HTML file. A helpful tip came from this article.
I then stumbled upon this issue on GitHub regarding extracting the Phoenix Client. From there, I discovered the somewhat dated phoenix-js npm package. After installing it with npm insall --save phoenix-js and incorporating it into my project, aligned with this seed as my base Angular App. The implementation went into my project definition:
import { join } from 'path';
import { SeedConfig } from './seed.config';
import { InjectableDependency } from './seed.config.interfaces';
export class ProjectConfig extends SeedConfig {
PROJECT_TASKS_DIR = join(process.cwd(), this.TOOLS_DIR, 'tasks', 'project');
constructor() {
super();
let additional_deps: InjectableDependency[] = [
{src: 'phoenix-js/dist/glob/main.js', inject: 'libs'}
];
const seedDependencies = this.NPM_DEPENDENCIES;
this.NPM_DEPENDENCIES = seedDependencies.concat(additional_deps);
}
}
Now, I can utilize it in my Angular 2 service:
import { Injectable } from '@angular/core';
declare var Socket: any;
declare var Channel: any;
@Injectable()
export class PhoenixChannelService {
socket: any;
channel: any;
constructor() {
this.socket = new Socket("/socket", {
logger: ((kind, msg, data) => { console.log(`${kind}: ${msg}`, data) })
});
this.socket.connect({user_id: "123"});
}
}
Depending on your build process (such as using gulp) and other factors, adjustments may be needed. Nevertheless, I hope this assists others grappling with a similar challenge.
Update: The official extracted JS client for Phoenix is located here. Despite encountering issues making it function within my setup, likely due to Typescript constraints.