Как добавить SockJS в проект Angular 2?

Question

Я использую angular-cli для создания нового проекта. Теперь я хочу добавить socketJs к проекту, но продолжаю получать ошибки в браузере консоли:

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) 

Это мои шаги и конфигурации:

typings install sockjs-client --save --ambient 

угловые-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)' 
    ] 
    }); 
}; 

система-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' 
    } 
}; 

Мой пользовательский класс обслуживания:

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

Пожалуйста, дайте мне знать, как это исправить, спасибо много!

Я могу, однако, устранить некоторую ошибку, включив недостающий lib, добавив их один за другим в system-config.ts. Но я сомневаюсь, что это правильный подход.

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

Я нашел решение этой проблемы.

Проблема заключается в том, что: npm install sockjs-client загружает sockjs-node вместо клиента. Надеюсь, они скоро это исправит.

В вашем проекте вы указываете vendor/sockjs-client/lib/entry.js вместо этого вы должны скачать этот файл http://cdn.jsdelivr.net/sockjs/1/sockjs.min.js. Положите его в свой проект и укажите на него в system-config.ts.

Answer 2

В Angular2, самый простой способ импорта sockjs заключается в использовании:

import 'your_path/sockjs-1.1.1.js' 

но прежде чем импортировать, пожалуйста, изменить часть кода в первой строке «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()} 

заменить код выше, чтобы:

window.SockJS = e() 

после затем SockJS может быть доступ из любой точки мира, потому что теперь это свойство окна в browser.Also вам нужно сказать машинопись SockJS является окружающая переменную добавив:

declare let SockJS: any 

Answer 3

в новой версии angular2 CLI https://cli.angular.io/ просто добавить библиотеку.

Если вы хотите добавить только sockjs_client

1) npm i --save sockjs-client

2) В typings.d.TS добавить объявление declare module 'sockjs-client';

Но я бы рекомендовал использовать Stomp-Over-WebSocket сервис для угловой 2

Установите это НПМ пакеты

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

В typings.d.ts

Add stompjs и sockjs-client заявление модуля

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

В app.module.ts

import { StompService } from 'ng2-stomp-service'; 

@NgModule({ 
    ... 
    providers: [StompService] 
}) 

В 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'); 
    }); 


} 

источника https://github.com/devsullo/ng2-STOMP-Over-WebSocket