问题描述
我使用angular-cli生成一个新项目.现在,我想将socketJs添加到项目中,但是在浏览器控制台中不断出现错误:
I use angular-cli to generate a new project. Now I want to add socketJs to the project, but keep getting errors in 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)
这是我的步骤和配置:
typings install sockjs-client --save --ambient
angular-cli-build.js
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
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'
}
};
我的自定义服务类:
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 it, thanks a lot!
但是,我可以通过在system-config.ts中一个接一个地添加丢失的库来消除一些错误.但是我怀疑这是正确的方法.
I can, however, eliminate some error by including the missing lib by adding them one by one in system-config.ts. But I doubt 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',
...
};
推荐答案
在新版本的angular2 CLI中 https://cli.angular.io/,添加库很简单.
In new version of angular2 CLI https://cli.angular.io/ it is simple to add library.
如果您只想添加sockjs_client
If you want to add only sockjs_client
1) npm i-保存sockjs-client
2)在 typings.d.ts 中添加此声明 declare模块'sockjs-client';
2) In typings.d.ts add this declaration declare module 'sockjs-client';
但是我建议对角度2使用STOMP-Over-WebSocket服务
But I would recommend to use STOMP-Over-WebSocket Service for 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');
});
}
source https://github.com/devsullo/ng2-STOMP-Over-WebSocket
这篇关于如何将SockJS添加到Angular 2项目中?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!