How to add SockJS to an Angular 2 project?

Question

I use angular-cli to create a new project. Now I want to add socketJs to the project, but keep getting errors in the browser console:

GET http://localhost:4200/url-parse 404 (Not Found) GET http://localhost:4200/inherits 404 (Not Found) Unhandled Promise rejection: Error: XHR error (404 Not Found) loading http://localhost:4200/url-parse at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:4200/vendor/zone.js/dist/zone.js:769:30) at ZoneDelegate.invokeTask (http://localhost:4200/vendor/zone.js/dist/zone.js:356:38) at Zone.runTask (http://localhost:4200/vendor/zone.js/dist/zone.js:256:48) at XMLHttpRequest.ZoneTask.invoke (http://localhost:4200/vendor/zone.js/dist/zone.js:423:34) Error loading http://localhost:4200/url-parse as "url-parse" from http://localhost:4200/vendor/sockjs-client/lib/main.js ; Zone: <root> ; Task: Promise.then ; Value: Error: Error: XHR error (404 Not Found) loading http://localhost:4200/url-parse(…) Error: Uncaught (in promise): Error: Error: XHR error (404 Not Found) loading http://localhost:4200/url-parse(…) GET http://localhost:4200/json3 404 (Not Found) GET http://localhost:4200/debug 404 (Not Found) GET http://localhost:4200/events 404 (Not Found) GET http://localhost:4200/eventsource 404 (Not Found) GET http://localhost:4200/crypto 404 (Not Found) GET http://localhost:4200/json3 404 (Not Found) GET http://localhost:4200/url-parse 404 (Not Found) GET http://localhost:4200/debug 404 (Not Found) GET http://localhost:4200/inherits 404 (Not Found) Assertion failed: loading or loaded GET http://localhost:4200/events 404 (Not Found) Assertion failed: loading or loaded GET http://localhost:4200/faye-websocket 404 (Not Found) Assertion failed: loading or loaded GET http://localhost:4200/eventsource 404 (Not Found) Assertion failed: loading or loaded GET http://localhost:4200/http 404 (Not Found) GET http://localhost:4200/https 404 (Not Found) 

These are my steps and settings:

 typings install sockjs-client --save --ambient 

angular-cli-build.js

 var Angular2App = require('angular-cli/lib/broccoli/angular2-app'); module.exports = function(defaults) { return new Angular2App(defaults, { vendorNpmFiles: [ 'systemjs/dist/system-polyfills.js', 'systemjs/dist/system.src.js', 'zone.js/dist/**/*.+(js|js.map)', 'es6-shim/es6-shim.js', 'reflect-metadata/**/*.+(ts|js|js.map)', 'rxjs/**/*.+(js|js.map)', '@angular/**/*.+(js|js.map)', 'sockjs-client/**/*.+(js)' ] }); }; 

system-config.ts

 /** Map relative paths to URLs. */ const map: any = { 'sockjs-client': 'vendor/sockjs-client/lib/entry.js' }; /** User packages configuration. */ const packages: any = { 'vendor/sockjs-client/lib': { 'format': 'cjs', 'defaultExtension': 'js' } }; 

My custom service class:

 import { Injectable } from '@angular/core'; import * as SockJS from 'sockjs-client'; import BaseEvent = __SockJSClient.BaseEvent; import SockJSClass = __SockJSClient.SockJSClass; @Injectable() export class WebsocketService { private sockJs: SockJSClass; constructor() { console.log('constuctor'); this.sockJs = new SockJS('/hello'); } } 

Please let me know how to fix this, thanks a lot!

I can, however, fix some error by including the missing lib, adding them one by one to system-config.ts. But I doubt that this is the right approach.

 const map: any = { 'sockjs-client': 'vendor/sockjs-client/lib/entry.js', 'json3': 'vendor/sockjs-client/node_modules/json3/lib/json3.js', 'url-parse': 'vendor/sockjs-client/node_modules/url-parse/index.js', 'inherits': 'vendor/sockjs-client/node_modules/inherits/inherits.js', 'debug': 'vendor/sockjs-client/node_modules/debug/debug.js', ... }; 

Answer 1

I found a solution to this problem.

The problem is that: npm install sockjs-client loads sockjs-node instead of the client. I hope they fix it soon.

In your project, you point to vendor/sockjs-client/lib/entry.js , instead you should download this file http://cdn.jsdelivr.net/sockjs/1/sockjs.min.js , put it in your project and point to it in system-config.ts .

Answer 2

In the new version of angular2 CLI https://cli.angular.io/ just add a library.

If you want to add only sockjs_client

1) npm i --save sockjs-client

2) In typings.d.ts add this declaration declare module 'sockjs-client';

But I would recommend using the STOMP-Over-WebSocket service for angular 2

Install these npm packages

 npm i --save stompjs npm i --save sockjs-client npm i --save ng2-stomp-service 

In typings.d.ts

Add stompjs and sockjs-client module declaration

 declare module 'stompjs'; declare module 'sockjs-client'; 

In app.module.ts

 import { StompService } from 'ng2-stomp-service'; @NgModule({ ... providers: [StompService] }) 

In app.components.ts

 import { StompService } from 'ng2-stomp-service'; private wsConf = { host:'test.com' } constructor(stomp: StompService) { stomp.configure(this.wsConf); stomp.startConnect().then(() => { console.log('connected'); }); } 

source https://github.com/devsullo/ng2-STOMP-Over-WebSocket

Answer 3

In Angular2, the easiest way to import sockjs is to use:

 import 'your_path/sockjs-1.1.1.js' 

but before importing, please change part of the code in the first line of 'sockjs-1.1.1.js'.

 if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.SockJS=e()} 

replace the above code with:

 window.SockJS = e() 

after that SockJS can be accessed from anywhere, because now it is a window property in the browser. You also need to specify typescript SockJS - this is an environment variable, adding:

 declare let SockJS: any