404 使用 Angular2、angular2-websocket 和类型答案

【问题标题】：404 using Angular2, angular2-websocket and typings404 使用 Angular2、angular2-websocket 和类型
【发布时间】：2016-06-29 20:45:24
【问题描述】：

...
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");
   ...

在我的浏览器上我得到了这个：

GET http://localhost:1880/node_modules/angular2-websocket/angular2-websocket 404（未找到）I @system.src.js:4597（匿名函数） http://localhost:1880/node_modules/angular2-websocket/angular2-websocket(…)

我在 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>

****** 编辑 *******

我成功找到了 FIX：

系统配置（{ 转译器：'打字稿'， typescriptOptions: { emitDecoratorMetadata: true }, 包：{ 'app': {defaultExtension: 'ts'}, 'js': { defaultExtension: 'ts' }}, 地图： { 'angular2-websocket'：'js' } }); System.import('app/main') .then(null, console.error.bind(console));

我不得不将文件从 node_module 复制到一个新的 js 文件夹中。这不是很好，但如果这些文件不在 nodeJs 的“公共”文件夹中，我不知道如何在客户端使用它：/

【问题讨论】：

你是如何包含模块并引用它的？你在用 SystemJS 吗？
是的，我正在使用 SystemJS
另外，如果我将它添加到我的 index.html 中：然后我得到这个错误：Uncaught TypeError: Unexpected anonymous System.注册电话

标签： websocket angular systemjs

【解决方案1】：

我认为这是一个 SystemJS 配置。你试试这个：

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

【讨论】：

这不起作用。我还需要在“包”上添加什么内容？
我会尽快回来做新的测试。我的 POC 没有太多空闲时间，而且混合很多东西非常复杂 ^_^

【解决方案2】：

另一个解决方案是更改 NodeRed 的根目录，因为它指向“公共”文件夹：

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

然后我们可以在 index.html 上声明：

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

【讨论】：