web-dev-qa-db-fra.com

Fabrication Angular itinéraires fonctionnent avec les itinéraires Express

Je suis dans l'impasse avec l'établissement de Angular routes pour travailler avec Express. 

J'ai essayé de faire comme ici Express 4, NodeJS, routage AngularJS mais cela n'a pas fonctionné. Le fichier static index.html est utilisé chaque fois que l'URL change, mais le Angular n'intercepte pas le partiel.

Dans mon Express, j'ai le code suivant:

var express = require("express");
var app = express();
app.use(express.static(__dirname + '/app'));
app.use("*",function(req,res){
    res.sendFile(path.join(__dirname,"app/index.html"));
});
app.listen(1337, function(){
    console.log("Server is listening on port 1337");
});

Et dans mon application Angular, j'ai les éléments suivants: 

var app = angular.module("myapp",["ngRoute","appControllers"]);

    app.config(["$routeProvider","$locationProvider",function($routeProvider,$locationProvider){
            $locationProvider.html5Mode(true);
            $routeProvider
                    .when("/list",{
                        templateUrl: "/partials/users.html",
                        controller: "userListCntr"
            })
                    .when("/edit", {
                        templateUrl: "/partials/edit.html",
                        controller: "userEditCntr"
            })
                    .when("/register", {
                        templateUrl: "/partials/register.html",
                        controller: "registerCntr"
            })
                    .when("/login", {
                        templateUrl: "/partials/login.html",
                        controller: "registerCntr"
            });

    }]);

Je n'ai aucune erreur dans la console de mon navigateur. L'inspecteur html indique: <!-- ngView: -->, de sorte que la directive est en quelque sorte initialisée. 

Et liste de dépendance:

dependencies": {
    "angular": "1.3.x",
    "angular-mocks": "1.3.x",
    "jquery": "1.10.2",
    "bootstrap": "~3.1.1",
    "angular-route": "1.3.x",
    "angular-resource": "1.3.x",
    "angular-animate": "1.3.x"
  }

voici la structure de mon fichier:

--app (angular app)
   --components
   --js
   --css
   --img
   --assets
   --partials
   --index.html
--node-modules
--server.js (here express settigs are)

De plus, j'ai apporté les modifications suivantes pour prendre en compte toutes les ressources statiques, mais cela ne fonctionne toujours pas:

app.use(express.static(__dirname+ "/app"));
app.use('/js', express.static(__dirname + '/app/js'));
app.use('/dist', express.static(__dirname + '/../dist'));
app.use('/css', express.static(__dirname + '/app/css'));
app.use('/assets', express.static(__dirname + '/app/assets'));
app.use('/components', express.static(__dirname + '/app/components'));
app.use('/img', express.static(__dirname + '/app/img'));
app.use('/partials', express.static(__dirname + '/app/partials'));

app.all('/*', function(req, res, next) {
    // Just send the index.html for other files to support HTML5Mode
    res.sendFile('/app/index.html', { root: __dirname });
});

S'il vous plaît, aidez-moi, car je ne trouve pas de solution. Merci!

angularjsnode.jsexpress
7
kirgol

Lorsque vous ne transmettez pas un chemin à express.use(), la valeur par défaut est /. La règle de procédure que vous avez définie pour * est redondante ou peut même ne pas fonctionner.

De même, puisque vous utilisez html5mode, vous devez explicitement distinguer les itinéraires des ressources afin qu'Express n'essaie pas de servir votre fichier index.html pour toutes les demandes.

Essayez cet exemple à partir de Angular UI-Router on pour la taille:

var express = require('express');
var app = express();

app.use('/js', express.static(__dirname + '/js'));
app.use('/dist', express.static(__dirname + '/../dist'));
app.use('/css', express.static(__dirname + '/css'));
app.use('/partials', express.static(__dirname + '/partials'));

app.all('/*', function(req, res, next) {
    // Just send the index.html for other files to support HTML5Mode
    res.sendFile('index.html', { root: __dirname });
});

app.listen(3006); //the port you want to use
5
joshuahiggins

Merci à tous pour l'aide. J'ai résolu la question en insérant <base href="/" /> dans la section head de mon Angular index.html. Cela a fonctionné pour moi, mais à partir de maintenant, cela ressemble à de la magie et du codage car je ne comprends pas pourquoi cela fonctionne:) Solution trouvée ici: AngularJS: comment activer $ locationProvider.html5Mode avec deeplinking

2
kirgol

Je veux juste ajouter que l'ajout de base href= m'a aidé. J'ai mon application servie statiquement dans Express et une navigation directe vers les itinéraires dans mon application angulaire causerait beaucoup de problèmes. 

a refusé d'exécuter le script car son type mime ('text/html') n'est pas exécutable et la vérification de type mime stricte est activée

erreurs à jeter. Mais l’ajout de base href a corrigé le problème et je peux maintenant accéder directement à mes itinéraires angulaires.

1
Carlos Muentes

Bien que la solution proposée par @kirgol consistant à utiliser base href= fonctionne bien, il existe une solution alternative qui pourrait intéresser une personne recherchant un service de route simple. Dans cette solution, nous n'utiliserons pas le routage ExpressJS 

Utilisez simplement ceci

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

au lieu de cela

app.all('/*', function(req, res, next) {
    // Just send the index.html for other files to support HTML5Mode
    res.sendFile('index.html', { root: __dirname });
});

De cette façon, expressJS servira automatiquement le fichier index.html présent à cet emplacement statique et gérera automatiquement le routage. Il se comportera comme un simple serveur http. Au moment où vous gérez le routage à l'aide de app.all/app.get - vous devrez configurer base href pour indiquer à $locationProvider l'emplacement à partir duquel il peut correspondre aux itinéraires.

1
rahulthakur319