8

我使用 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)'
    ]
  });
};

系统配置.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');
  }
}

请告诉我如何解决它，非常感谢！

但是，我可以通过在 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',
  ...
};
4

3 回答 3

5

在新版本的 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 服务用于 angular 2

安装这个 npm 包

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

在typings.d.ts

添加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

于 2017-03-20T14:15:22.353 回答
3

我找到了解决这个问题的方法。

问题是：npm install sockjs-client下载 sockjs-node 而不是客户端。我希望他们能尽快修复它。

在您指向的项目中，vendor/sockjs-client/lib/entry.js您应该下载此文件http://cdn.jsdelivr.net/sockjs/1/sockjs.min.js并将其放入您的项目中并在system-config.ts.

于 2016-09-20T22:37:06.673 回答
1

在 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可以从任何地方访问，因为现在它是浏览器中窗口的属性。此外，您需要通过添加来告诉 typescript SockJS 是环境变量：

declare let SockJS: any
于 2016-12-23T07:10:04.937 回答