Versuchen Sie Stomp über SockJS zu eckigen App hinzuzufügen: TS2307 Kann Modul

Question

nicht finden

Ich habe ein funktionierendes plain-old-javascript Beispiel für die Verbindung mit Websocket Spring-Kanal heruntergeladen und ich habe Probleme mit dem Importieren dieser Funktionalität zu eckigen 2 Anwendung.

Ich habe Importe hinzugefügt package.json:

"dependencies": { 
    "@angular/common": "~2.2.1", 
    (...) 
    "stompjs": "2.3.3", 
    "sockjs-client": "1.1.1" 
    }, 

Dann eine vorgeschlagene bearbeiten systemjs.config.js:

(function (global) { 
    System.config({ 
     paths: { 
      // paths serve as alias 
      'npm:': 'node_modules/' 
     }, 
     // map tells the System loader where to look for things 
     map: { 
      // our app is within the app folder 
      app: 'app', 
      // angular bundles 
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
      (...) 
      'sockjs-client': 'npm:sockjs-client', 
      'stompjs': 'npm:stompjs' 
     }, 
     // packages tells the System loader how to load when no filename and/or no extension 
     packages: { 
      (...) 
      'sockjs-client': { 
       defaultExtension: 'js' 
      }, 
      stompjs: { 
       defaultExtension: 'js' 
      } 
     } 
    }); 
})(this); 

Aber wenn ich fügen Sie den Import

import {Stomp} from "stompjs"; 

Ich bekomme die Fehlermeldung "TS2307: Kann Modul nicht finden" und den kompilierten Code:

var stompjs_1 = require("stompjs"); 

Ergebnisse in einem ungültigen http url:

http://localhost/myapp/node_modules/stomp-client 

statt Pfad zu JS-Datei.

Was habe ich hier falsch gemacht? Ich habe viele SO Antworten gesucht, wie hier: How to use moment.js library in angular 2 typescript app? und ich habe versucht, alles ähnlich zu machen. Ich habe auch versucht, alternative Import-Syntax wie:

import * as Stomp from 'stompjs'; 

aber nichts funktioniert.

Wie verwendet man beide Bibliotheken in Angular2?

Answer 1

Sie müssen den vollständigen Pfad zu der JavaScript-Datei in Ihrer Bibliothek, in systemjs.config.js schreiben:

Zum Beispiel für stompjs nach dem Repo auf Github, könnte es sein:

map { 
    (...) 
    'stompjs': 'npm:stompjs/lib/stomp.min.js' 
}, 
packages: { 
    // Remove stompjs from here, because you already have the full path 
} 

Nachdem Sie Ihre Bibliothek mit dieser Syntax verwenden:

import * as stomp from 'stompjs'; 

Sie werden immer noch die Fehler haben error TS2307: Cannot find module, aber zumindest wird es in Ihrem browse arbeitet r.

Ich hoffe es hilft.