start-angular/angular2-node-socket-io-chat-app

not working

srmishra opened this issue · 7 comments

GET http://localhost:3000/client/main.js 404 Not Found

Console

[0] > angular2-socket-chatApp@1.0.0 tsc:w D:\angular2-node-socket-i
o-chat-app
[0] > tsc -w .//*.ts
[0]
[0] error TS6053: File '
/*.ts' not found.
[0] 7:56:25 PM - Compilation complete. Watching for file changes.

+1, I'm also struggling with this error...

It seems /client is an excluded directory in tsconfig.json, resulting in *.ts not found & /client/main.js 404 when loacalhost:3000 is loaded.

Removing /client from the excludes allows tsc to compile the typescript files, however hits some compilation errors:

client/nickName-component/nickName.component.ts(31,9): error TS2450: Left-hand side of assignment expression cannot be a constant or a read-only property. client/nickName-component/nickName.component.ts(31,29): error TS2304: Cannot find name 'io'.

Chat app will still not work at this point, BUT if we re-exclude /client & 'npm start' again, localhost:3000 seems much closer to working.

FYI these changes got it compiling and working for me: muniom@d8095a4

Any news ? 😞

muniom changes in nickName.component.ts and tsconfig.json works for me. Not needed to change typings.json.

what changes do you made can you plz tell..

Here are the changes you have to do -

  1. Fix tsconfig.json
{
    "compileOnSave": true,
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false,
        "allowJs": true
    },
    "exclude": [
    "node_modules",
    "typings/index.d.ts",
    "typings/modules",
    "server",
    "systemjs.config.js"
    ],
    "typescript.tsdk": "node_modules/typescript/lib"
}
REMOVE 'client' from 'exclude'
  1. Fix nickname component
import { Component } from "@angular/core";
import { Router } from "@angular/router";
import * as globalVars from "../service/global";
import { Inject } from "@angular/core";


/// <reference path="../../typings/globals/jquery/index.d.ts/>



import "/socket.io/socket.io.js";
declare var io;

@Component({
  moduleId: module.id,
  selector: "nick-name",
  templateUrl: "nickName.component.html"
})

export class NickNameComponent {
  nickname: string = null;
  protected router;
  protected globalVars = globalVars;

  constructor( @Inject(Router) router: Router) {
    this.router = router;
  }

  submit(data) {
    this.nickname = data.value;
    if (this.nickname) {
      this.globalVars.socket = io({ query: "userName=" + this.nickname });
      this.router.navigate(["chat"]);
    }
  }

  addNickname($event, nickname) {
    if ($event.which === 13) { // ENTER_KEY
      this.submit(nickname);
    }
  }
}
  1. typings.Json
{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160602141332",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "jquery": "registry:dt/jquery#1.10.0+20160908203239",
    "node": "registry:dt/node#6.0.0+20160807145350"
  },
  "ambientDependencies": {
    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd"
  }
}

with above mentioned changes and with changed version of rxjs it works on windows machine.

"rxjs": "5.4.2",