javascript - Typescript - 在模块内找不到构造函数方法

Question

我有以下问题。 我已经使用 angular-cli 工具创建了一个示例项目，并且 app.component.ts 文件中有以下代码

import { Component } from '@angular/core';
import * as Stomp from '@stomp/stompjs';
import * as SockJS from 'sockjs-client';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  stompClient: any = null;

  constructor(){
      this.connect();
  }

  connect() {
      let socket: any = new SockJS('http://localhost:8083/gs-guide-websocket');
      this.stompClient = Stomp.over(socket);
      this.stompClient.connect({}, (frame) => {
          ...
      });
  }
}

在 package.json 文件中我有这个:

"dependencies": {
    "@angular/animations": "^4.2.4",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "@stomp/stompjs": "^3.1.1",
    "core-js": "^2.4.1",
    "rxjs": "^5.4.2",
    "sockjs-client": "^1.1.4",
    "websocket": "^1.0.25",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.4.9",
    "@angular/compiler-cli": "^4.2.4",
    "@angular/language-service": "^4.2.4",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.2.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.3.3"
  }

这段代码运行良好。客户端与服务器的通信已建立。

我已将相同的 app.component.ts 文件添加到另一个项目(不是使用 angular-cli 工具创建的)，但在调用 connect() 方法期间出现以下错误:

    ERROR TypeError: SockJS is not a constructor
    at AppComponent.connect (sam.ts:26)
    at new AppComponent (app.component.ts:22)
    at createClass (provider.ts:359)
    at createDirectiveInstance (provider.ts:181)
    at createViewNodes (view.ts:341)
    at callViewAction (view.ts:782)
    at execComponentViewsAction (view.ts:700)
    at createViewNodes (view.ts:358)
    at createRootView (view.ts:197)
    at Object.createProdRootView [as createRootView] (services.ts:103)
zone.min.js:1 Unhandled Promise rejection: SockJS is not a constructor ; Zone: <root> ; Task: Promise.then ; Value: TypeError: SockJS is not a constructor
    at AppComponent.connect (app.component.ts:26)
    at new AppComponent (app.component.ts:22)
    at createClass (provider.ts:359)
    at createDirectiveInstance (provider.ts:181)
    at createViewNodes (view.ts:341)
    at callViewAction (view.ts:782)
    at execComponentViewsAction (view.ts:700)
    at createViewNodes (view.ts:358)
    at createRootView (view.ts:197)
    at Object.createProdRootView [as createRootView] (services.ts:103) TypeError: SockJS is not a constructor

该项目有以下package.json:

"dependencies": {
    "@angular/compiler-cli": "^4.3.1",
    "@angular/platform-server": "^4.3.1",
    "@types/protobufjs": "^6.8.0"
  },
 "devDependencies": {
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.3.1",
    "@angular/compiler-cli": "^4.3.1",
    "@angular/core": "^4.3.1",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.3.1",
    "@angular/platform-browser": "^4.3.1",
    "@angular/platform-browser-dynamic": "^4.3.1",
    "@angular/platform-server": "^4.3.1",
    "@angular/router": "^4.3.1",
    "@ngtools/webpack": "1.1.2",
    "@stomp/stompjs": "^3.1.1",
    "@types/core-js": "0.9.34",
    "@types/node": "6.0.41",
    "long": "^3.2.0",
    "angular2-template-loader": "0.6.2",
    "awesome-typescript-loader": "^3.2.1",
    "core-js": "2.4.1",
    "protobufjs": "^6.8.0",
    "raw-loader": "0.5.1",
    "rxjs": "^5.4.2",
    "sockjs-client": "^1.1.4",
    "websocket": "^1.0.25",
    "systemjs": "0.19.41",
    "typescript": "^2.4.2",
    "webpack": "3.3.0",
    "zone.js": "0.8.14"
  }

还有一个 systemjs.config.js 文件，其中包含以下内容:

map:
   {
      ...
      'sockjs-client': 'node_modules/sockjs-client',
      '@stomp/stompjs': 'node_modules/@stomp/stompjs'
   },
   packages:
   { 
      ...
      'node_modules/sockjs-client': { main: './dist/sockjs.js' },
      'node_modules/@stomp/stompjs': { main: './lib/stomp.js' }  
   }

我不明白为什么它找不到构造函数方法。 对理解和修复此错误有何帮助？

Answer 1

为此库安装类型 https://www.npmjs.com/package/@types/sockjs-client您将了解如何正确使用它。