2017-01-01 4 views
0

Meine App stürzt sofort nach Eingabe einer URL in allen Browsern ab. Ich verwende Node im Backend und Angular am Frontend (MEAN Stack). Ich starte meinen Server nodemon server.js verwenden, und es sagt mir, es auf Port lauscht 8080.Node/Angular App stürzt in allen Browsern unter Last ab?

Hier ist die server.js Datei

var express = require('express'); 
var app = express(); 
var mongoose = require('mongoose'); 
var Schema = mongoose.Schema; 
var bodyParser = require('body-parser'); 
var path = require('path'); 
var router = express.Router(); 

app.use(express.static(__dirname + '/public')); 
app.use(bodyParser.urlencoded({ 'extended': 'true' })); 
app.use(bodyParser.json()); 

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

app.listen(8080); 
console.log('App listening on port 8080'); 

Das ist mein

var app = angular.module('app', ['ngRoute']); 

app.config(['$routeProvider', function($routeProvider) { 
    $routeProvider. 
     when('/login', { 
      templateUrl: 'public/views/login.html', 
      controller: 'userController' 
     }); 
}]); 
Routing

Der Controller sieht so aus:

app.controller('userController', function($scope) { 
    $scope.message = "Welcome to my App"; 
}); 

Und der Blick sieht wie folgt aus:

<section class="card login"> 
    <form> 
     <div class="textintro"> 
      <h1>Hello!</h1> 
      <p>Log-in to access group finding services</p> 
      <p>{{ message }}</p> 
     </div> 
     <fieldset> 
      <input type="email" name="email" placeholder="Email"> 
      <input type="password" name="password" placeholder="Password"> 
     </fieldset> 

     <button type="submit" class="btn btn-submit">Login</button> 
     <p>or <a href="#/register">register</a></p> 
    </form> 
</section> 

Dateistruktur

-node_modules 
-public 
    --css 
    --img 
    --js 
    ---app.js 
    --views 
    ---list.html 
    ---login.html 
    --index.html 
-package.json 
-server.js 

UPDATE

ich die Express-Router auf dem '*' Route verwendet und es gestoppt die pag e vor dem Absturz. Ich bekomme immer noch eine 404 für die statische Datei: localhost:8080/public/views/list.html

+0

Wie dienen Sie 'statische' Ressourcen außer' index.html'? z.B. 'js',' css', 'login.html' –

+0

Ich verwende diese Anweisung:' app.use (express.static (__ dirname + '/ public')); '... siehe auch EDIT –

+0

' app.get ('*', function (req, res) {'wird die index.html für ** jede Anfrage ** zurückgeben, einschließlich all Ihrer Vorlagen. Sie haben satt, dass Sie' app.use (express.static (__ dirname + '/ public'); 'in Ihrer server.js, ist dies *** vor *** oder *** nach *** der' app.get ... '? – Claies

Antwort

0

Natürlich, alles, was es dauerte, war tatsächlich das Lesen der Dokumentation für serving static files with express.

doh ...

musste ich einfach nutzen:

app.use(express.static('public')); 

Und dann in meiner Winkel app.js Datei die vorhergehenden /public entfernen, so:

app.config(['$routeProvider', function($routeProvider) { 
    $routeProvider. 
     when('/', { 
      templateUrl: '/views/list.html', 
      controller: 'listController' 
     }). 

Die andere Problem war, dass ich den expres-Router verwenden musste, um den Absturz der Seite zu verhindern:

var router = express.Router(); 

router.get('*', function(req, res) { 
    res.sendFile(path.join(__dirname + "/public/index.html")); 
}); 

Danke für die Hilfe alle. Zu viel Tutorial und zu wenig Lesedokumentation.