Tuesday 23 May 2017

Angular AOT Node.js (Express) deployment AWS ElasticBeanstalk, SyntaxError and routing

I did an Angular (4) AOT build using angular-cli 1.0 ("ng build --prod --aot" compiling to the dist directory), then zipped 5 items:

  • 3 Directories: (dist, server, views)
  • 2 Files: package.json & server.js

I deployed it to a free elastic beanstalk aws server here:

http://sample-env.bjstcuctav.us-east-2.elasticbeanstalk.com/jobs

In the authentication section, while attempting to login with a newly created account, I am getting a POST error and a parsing error, which from my understanding is caused server-side:

POST http://sample-env.bjstcuctav.us-east-2.elasticbeanstalk.com/signin 404 (Not Found)

SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse ()

Additionally, my logout component is missing.

Here is some possibly useful server.js code:

// Parsers
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.set('views', path.join(__dirname, 'views'));
app.set("view engine", "ejs");

app.use(function (req, res, next) {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  res.setHeader('Access-Control-Allow-Methods', 'POST, GET, PATCH, DELETE, OPTIONS');
  next();
});

This is my first deployed Angular/Node app and I'm just stuck here, without being able to really troubleshoot, considering I'm not exactly sure where things are going haywire, during the POST process (signing) or the server side parsing. From researching the Syntax error, I already saw a lot of posts related to server side parsing of code that is no longer json, but I can't seem to find any guidance on where to attack the problem and steps to troubleshoot. Any guidance would be greatly appreciated.

Also, here's my package.json, in case it might help too:

{
  "name": "love-health",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build": "ng build && node server.js"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.1.1",
    "@angular/common": "^4.1.1",
    "@angular/compiler": "^4.1.1",
    "@angular/compiler-cli": "^4.1.3",
    "@angular/core": "^4.1.1",
    "@angular/forms": "^4.1.1",
    "@angular/http": "^4.1.1",
    "@angular/platform-browser": "^4.1.1",
    "@angular/platform-browser-dynamic": "^4.1.1",
    "@angular/platform-server": "^4.1.3",
    "@angular/router": "^4.1.1",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.22",
    "@types/hammerjs": "^2.0.34",
    "axios": "^0.15.3",
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.17.1",
    "bootstrap": "^4.0.0-alpha.6",
    "cookie-parser": "^1.4.3",
    "core-js": "^2.4.1",
    "express": "^4.15.2",
    "hammerjs": "^2.0.8",
    "jquery": "^3.1.1",
    "jsonwebtoken": "^7.3.0",
    "mongoose": "^4.8.7",
    "mongoose-unique-validator": "^1.0.5",
    "morgan": "^1.8.1",
    "rxjs": "^5.3.1",
    "serve-favicon": "^2.4.1",
    "tether": "^1.4.0",
    "ts-helpers": "^1.1.1",
    "typescript": "^2.3.2",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "^1.0.0",
    "@angular/compiler-cli": "^2.3.1",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.3.0",
    "typescript": "~2.0.3"
  }
}



via Bogie

No comments:

Post a Comment