404 error http://localhost:4200/socket.io/

[ChrisWorks]

I have created a basic angular2 app using the angular-cli and installed angular2-sails and socket.io-client. My sails application is running at localhost 1338.

When running my angular2 app I am getting a 404 error:

GET http://localhost:4200/socket.io/?__sails_io_sdk_version=0.13.5&__sails_io_s…owser&__sails_io_sdk_language=javascript&EIO=3&transport=polling&t=LjIO6bs 404

My backend authentication service is calling the sails service:

import { Injectable } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { SailsService } from './sails.service';
import 'rxjs/add/operator/map'

@Injectable()
export class AuthenticationService {

    private url = '/auth/local';
    private explicitHost = 'localhost';
    private port = '1338';

    constructor(private _backend : SailsService) { }

    ngOnInit() {
        this._backend.connect("http://" + this.explicitHost + ":" + this.port);
      }

    login(username: string, password: string) {
        return this._backend.post('/auth/local', JSON.stringify({ username: username, password: password }))
            .map((response: Response) => {
                // login successful if there's a jwt token in the response
                let user = response.json();
                if (user && user.token) {
                    // store user details and jwt token in local storage to keep user logged in between page refreshes
                    localStorage.setItem('currentUser', JSON.stringify(user));
                }
            });
    }

    logout() {
        // remove user from local storage to log user out
        localStorage.removeItem('currentUser');
    }
}

I am not sure if there is a config issue or build issue.

My angular-cli.json looks like this:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "curb-frontend"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css",
        "css/styles.css"
      ],
      "scripts": [
        "assets/js/vendor/sails.io.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

My packpage.json is:

{
  "name": "curb-frontend",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "angular2-sails": "^0.2.8",
    "core-js": "^2.4.1",
    "rxjs": "^5.1.0",
    "socket.io-client": "^1.7.3",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.0.0",
    "@angular/compiler-cli": "^4.0.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.2.0"
  }
}

Anyone know where I am going wrong?

[red-duck]

I solved this by creating a proxy for WebPack

To begin, create a new file in your client root:

proxy.config.json

{
  "/socket.io/": {
    "target": "http://localhost:1337",
    "secure": false,
    "logLevel": "debug",
    "ws": true
  }
}

Edit package.json and update the "start" property in the "scripts" tree

"scripts": {
  "ng": "ng",
  "start": "ng serve --proxy-config proxy.config.json",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
}

Now start your Angular-CLI app using

npm start

[ChrisWorks]

That fixed it! Thanks.