404 using Angular2, angular2-websocket and typings

Question

...
import {$WebSocket} from "angular2-websocket/angular2-websocket";
@Injectable()
export class DeviceService {
 private logger:Logger;
 private ws:$WebSocket;
 constructor(
 private _logger: Logger
 ) {
 this.logger=_logger;
 this.ws = new $WebSocket("ws://nodered-iot.net/ws/devices");
 }
 private _devices:Device[] = [];
 getDevices() {
 this.ws.send("Hello");
 ...

On my browser I get this :

GET http://localhost:1880/node_modules/angular2-websocket/angular2-websocket 404 (Not Found)I @ system.src.js:4597(anonymous function) http://localhost:1880/node_modules/angular2-websocket/angular2-websocket(...)

I use this definition on index.html

<!-- 2. Configure SystemJS -->
<script>
 System.config({
 transpiler: 'typescript',
 typescriptOptions: { emitDecoratorMetadata: true },
 packages: {'app': {defaultExtension: 'ts'}},
 map: {
 'angular2-websocket': 'node_modules/angular2-websocket'
 }
 });
 System.import('app/main')
 .then(null, console.error.bind(console));
</script>

****** EDIT *******

i successfully found the FIX as it :

System.config({ transpiler: 'typescript', typescriptOptions: { emitDecoratorMetadata: true }, packages: { 'app': {defaultExtension: 'ts'}, 'js': { defaultExtension: 'ts' }}, map: { 'angular2-websocket': 'js' } }); System.import('app/main') .then(null, console.error.bind(console));

I had to copy files from node_module into a new js folder. This is not very nice but I don't know how to make this available on client side if these files are not on the 'public' folder of nodeJs :/

• David L: How have you included the module and referenced it? Are you using SystemJS?
• Benjamin Fuentes: Yes, I am using SystemJS
• Benjamin Fuentes: Also If i add this to my index.html : <script src="js/angular2-websocket.js"></script> then I got this error : Uncaught TypeError: Unexpected anonymous System.register call

Answer 1

I think that it's a SystemJS configuration. You try this:

<script>
 System.config({
 map: {
 'angular2-websocket': 'node_modules/angular2-websocket'
 },
 packages: {
 (...)
 }
 });
</script>

• Benjamin Fuentes: This does not work. What do I need to add something on 'packages' too ?
• Benjamin Fuentes: I will try to come back on it doing new tests asap. I don't have a lot of free time for my POC and it is quite complex mixing a lot of stuff ^_^

Answer 2

Anoher solution is to change the Root of NodeRed as it instead pointing to 'public' folder :

// Serve up the welcome page
httpStatic: path.join(__dirname,"/"),

then we can declare on the index.html :

<script src="/node_modules/angular2-websocket/angular2-websocket.js"></script>