Le fichier HTML servi par NodeJS + Express ne charge pas le fichier js?

J’exécute un serveur NodeJS qui utilise un itinéraire catchall pour servir un fichier ‘index.html‘. Dans ce fichier, je suis lié à un fichier javascript dans le même répertoire. Ce fichier javascript n’est pas chargé correctement. L’erreur dans ma console se lit comme suit: ‘Uncaught SyntaxError: Un Token inattendu <', qui après des recherches semble indiquer que le chemin d'accès à mon fichier JS est incorrect. Cependant, le fichier js se trouve dans le même répertoire que "index.html", et je le référence comme suit, ce qui devrait être correct?

Voici mon code

server.js

var express = require('express'); var app = express(); var config = require('./config'); var apiRouter = express.Router(); var mongoose = require('mongoose'); var bodyParser = require('body-parser'); var User = require('./app/models/User'); var jwt = require('jsonwebtoken'); var path = require('path'); //Set the public folder app.use(express.static('/public')); //Allows us to parse POST data. app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json()); mongoose.connect(config.db); var apiRouter = require('./app/routes/api')(app, express); app.use('/api', apiRouter); //MEAN apps use a catchall after any routes created by Node. app.get('*', function(req, res) { res.sendFile(path.join(__dirname, 'public/app/views/index.html')); }); app.listen(1337); console.log('Server started at ' + Date()); 

public / app / views / index.html

        

Served by node + express.

public / app / views / test.js

 console.log('test.js loaded'); 

Vous devriez définir votre dossier statique comme ceci

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

En outre, votre fichier html recherchera votre fichier de script dans le dossier / public lui-même. Vous devrez donner à votre fichier index.html le bon chemin d’access à votre fichier de script.

  

Voici ce qui se passe:

  • Le navigateur demande / , auquel répond votre route fourre-tout pour qu’il récupère index.html

  • Le navigateur voit ensuite un script dans le ./test.js HTML à l’ ./test.js . Il l’interprète ensuite comme étant /test.js et en fait la demande. Le middleware express.static recherche public/test.js , ce qui n’existe pas, il passe donc l’exécution à la prochaine route définie qui correspond à la demande, qui est votre route fourre-tout. Cela signifie que le code HTML est envoyé pour le fichier javascript, d’où l’erreur que vous voyez.

Donc, pour résoudre ce problème, vous devez remplacer ./test.js par le chemin relatif actuel ( ./app/views/test.js ) ou utiliser un chemin absolu ( /app/views/test.js ) pour vous assurer que le chemin est toujours utilisé, quel que soit le chemin actuel.

De plus, vous devrez changer ceci:

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

à quelque chose comme ça:

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

Sinon, le middleware express.static recherchera un répertoire nommé public à la racine de votre système de fichiers et vous rencontrerez le même problème avec la route catchall servant le langage HTML pour votre demande de fichier javascript.