dimanche 19 juillet 2015

DOCTYPE issue preventing AngularJS from functioning

So here is the story:

I ran my website on localhost perfectly, then my boss need me to deploy my site to AWS. However, AngularJS couldn't work on AWS, and in the console it says

"Uncaught SyntaxError: Unexpected token <"

and it points to the first row of <! DOCTYPE html>

Then I started to google, most people say I need to parse the JS objects into JSON, but in my server.js I have a body-parser that I believe it should parse everything to JSON.

I also tried to download AngularJS and run it locally, but surprisingly, both sides can't run AngularJS.

So please help guys...

Here are some codes:

index.html:

<!DOCTYPE html>
<html ng-app="MyApp" lang="en">
<head>
  <base href='/'>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Project Management System</title>
  <link rel="icon" type="image/png" href="app/views/icon/favicon-32x32.png" sizes="32x32" />
  <link rel="icon" type="image/png" href="app/views/icon/favicon-16x16.png" sizes="16x16" />

  <!-- Bootstrap -->
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">

  <!-- AngularJS -->
  <script type="text/javascript" src="http://ift.tt/1MeTcXW"></script>
  <script type="text/javascript" src="http://ift.tt/1Oqj16O"></script>

  <!-- Socket.io -->
  <script type="text/javascript" src="/http://ift.tt/1aeIZU4"></script>

  <!-- Services -->
  <script type="text/javascript" src="app/services/authService.js"></script>
  <script type="text/javascript" src="app/services/userService.js"></script>
  <script type="text/javascript" src="app/services/projectService.js"></script>

  <!-- Controllers -->
  <script type="text/javascript" src="app/controllers/mainCtrl.js"></script>
  <script type="text/javascript" src="app/controllers/userCtrl.js"></script>
  <script type="text/javascript" src="app/controllers/ProjectCtrl.js"></script>

  <!-- Directives -->
  <script type="text/javascript" src="app/directives/reverse.js"></script>

  <!-- App Routing -->
  <script type="text/javascript" src="app/app.route.js"></script>

  <!-- app.js -->
  <script type="text/javascript" src="app/app.js"></script>
</head>

<body ng-controller="MainController as main">
  <!-- Navigation Bar -->
  <header>
    <div class="navbar navbar-pilled">
      <div class="container">
        <div class="navbar-header">
          <a href="/" class="navbar-brand"><span class="glyphicon glyphicon-tasks"></span> FRCC Project Management System</a>
        </div>

        <ul class="nav navbar-nav navbar-right">
          <li class="text-center" ng-if="main.loggedIn"><a href="#">Hello, {{ main.user.firstname }}</a></li>
          <li class="text-center" ng-if="main.loggedIn"><a href="#" ng-click="main.doLogout()">Log Out</a></li>
        </ul>
      </div>
    </div>
  </header>

  <main class="container">
    <div ng-view></div>
  </main>

  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="http://ift.tt/1LdO4RA"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

server.js

var express = require('express');
var bodyParser = require('body-parser');
var morgan = require('morgan');
var config = require('./config.js');
var mongoose = require('mongoose');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);

mongoose.connect(config.database, function(err) {
  if (err) {
    console.log(err);
  } else {
    console.log('Connected to project-database.');
  }
});

app.use(bodyParser.urlencoded({ "extended": true }));
app.use(bodyParser.json());
app.use(morgan('dev'));

app.use(express.static(__dirname + '/public'));

var api = require('./app/routes/api')(app, express, io);
app.use('/api', api);

app.get('*', function(req, res) {
  res.sendFile(__dirname + '/public/app/views/index.html');
});

http.listen(config.port, function(err) {
  if (err) {
    console.log(err);
  }
  else {
    console.log("Listening on port " + config.port + ".");
  }
});




Aucun commentaire:

Enregistrer un commentaire