AngularJS - html5Mode - Impossible de GET / login
Salut ont créé une application angularJS avec yeoman, grunt et bower.
J'ai activé l'html5Mode pour l'application. Et son travail. Mais, lorsque j'actualise une page (localhost:9000/login), il est dit
Cannot GET /login //or any url I type or refresh
Ici est la structure de l'application
MainApp
|
|__app
| |
| |__bower_components
| |
| |__scripts
| | |
| | |__ app.js
| | |
| | |__contollers -- login.js, home.js, register.js
| | |
| | |__service -- js files
| | |
| | |__styles -- CSS files
| | |
| | |__views -- main.html, login.html, register.html,home.html
| |
| |__ index.html
|
|__ node_modules
|
|__ bower.json, Gruntfile.js, karma-conf.js, karma-e2e.conf.js, package.json
Voici mon app.js de routage
'use strict';
var superClientApp=angular.module('mainApp', ['ngCookies']);
//Define Routing for app
superClientApp.config(['$routeProvider', '$locationProvider',
function($routeProvider,$locationProvider) {
$routeProvider
.when('/login', {
templateUrl: 'login.html',
controller: 'LoginController'
})
.when('/register', {
templateUrl: 'register.html',
controller: 'RegisterController'
})
.when('/home', {
templateUrl: 'views/home.html',
controller: 'homeController'
})
.otherwise({
redirectTo: '/login'
});
$locationProvider.html5Mode(true);
}]);
Voici ma partie de Gruntfile.js
'use strict';
var LIVERELOAD_PORT = 35729;
var lrSnippet = require('connect-livereload')({ port: LIVERELOAD_PORT });
var mountFolder = function (connect, dir) {
return connect.static(require('path').resolve(dir));
};
var proxySnippet = require('grunt-connect-proxy/lib/utils').proxyRequest;
//# Globbing
//for performance reasons we're only matching one level down:
//'test/spec/{,*/}*.js'
//use this if you want to recursively match all subfolders:
//'test/spec/**/*.js'
module.exports = function (grunt) {
require('load-grunt-tasks')(grunt);
require('time-grunt')(grunt);
//configurable paths
var yeomanConfig = {
app: 'app',
dist: 'dist'
};
try {
yeomanConfig.app = require('./bower.json').appPath || yeomanConfig.app;
} catch (e) {}
grunt.initConfig({
yeoman: yeomanConfig,
watch: {
coffee: {
files: ['<%= yeoman.app %>/scripts/{,*/}*.coffee'],
tasks: ['coffee:dist']
},
coffeeTest: {
files: ['test/spec/{,*/}*.coffee'],
tasks: ['coffee:test']
},
styles: {
files: ['<%= yeoman.app %>/styles/{,*/}*.css'],
tasks: ['copy:styles', 'autoprefixer']
},
livereload: {
options: {
livereload: LIVERELOAD_PORT
},
files: [
'<%= yeoman.app %>/{,*/}*.html',
'.tmp/styles/{,*/}*.css',
'{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js',
'<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
]
}
},
autoprefixer: {
options: ['last 1 version'],
dist: {
files: [{
expand: true,
cwd: '.tmp/styles/',
src: '{,*/}*.css',
dest: '.tmp/styles/'
}]
}
},
connect: {
options: {
port: 9000,
//Change this to '0.0.0.0' to access the server from outside.
hostname: 'localhost'
},
proxies: [
{
context: '/serverApp',
host: 'localhost',
port: '8080',
https: false,
changeOrigin: false
}
],
livereload: {
options: {
middleware: function (connect) {
return [
lrSnippet,
proxySnippet,
mountFolder(connect, '.tmp'),
mountFolder(connect, yeomanConfig.app)
];
}
}
},
Je suis passé par cette SORTE de question. Et sur la base des accepté de répondre àj'ai changé mon Gruntfile.js pour ci-dessous.
'use strict';
var LIVERELOAD_PORT = 35729;
var lrSnippet = require('connect-livereload')({ port: LIVERELOAD_PORT });
var mountFolder = function (connect, dir) {
return connect.static(require('path').resolve(dir));
};
var proxySnippet = require('grunt-connect-proxy/lib/utils').proxyRequest;
var urlRewrite = require('grunt-connect-rewrite');
//# Globbing
//for performance reasons we're only matching one level down:
//'test/spec/{,*/}*.js'
//use this if you want to recursively match all subfolders:
//'test/spec/**/*.js'
module.exports = function (grunt) {
require('load-grunt-tasks')(grunt);
require('time-grunt')(grunt);
//configurable paths
var yeomanConfig = {
app: 'app',
dist: 'dist'
};
try {
yeomanConfig.app = require('./bower.json').appPath || yeomanConfig.app;
} catch (e) {}
grunt.initConfig({
yeoman: yeomanConfig,
watch: {
coffee: {
files: ['<%= yeoman.app %>/scripts/{,*/}*.coffee'],
tasks: ['coffee:dist']
},
coffeeTest: {
files: ['test/spec/{,*/}*.coffee'],
tasks: ['coffee:test']
},
styles: {
files: ['<%= yeoman.app %>/styles/{,*/}*.css'],
tasks: ['copy:styles', 'autoprefixer']
},
livereload: {
options: {
livereload: LIVERELOAD_PORT
},
files: [
'<%= yeoman.app %>/{,*/}*.html',
'.tmp/styles/{,*/}*.css',
'{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js',
'<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
]
}
},
autoprefixer: {
options: ['last 1 version'],
dist: {
files: [{
expand: true,
cwd: '.tmp/styles/',
src: '{,*/}*.css',
dest: '.tmp/styles/'
}]
}
},
connect: {
options: {
port: 9000,
//Change this to '0.0.0.0' to access the server from outside.
hostname: 'localhost',
base: 'app',
middleware: function(connect, options) {
//Return array of whatever middlewares you want
return [
//redirect all urls to index.html in build folder
urlRewrite('app', 'index.html'),
//Serve static files.
connect.static(options.base),
//Make empty directories browsable.
connect.directory(options.base)
];
}
},
proxies: [
{
context: '/serverApp',
host: 'localhost',
port: '8080',
https: false,
changeOrigin: false
}
],
livereload: {
options: {
middleware: function (connect) {
return [
lrSnippet,
proxySnippet,
mountFolder(connect, '.tmp'),
mountFolder(connect, yeomanConfig.app)
];
}
}
},
Mais encore, je reçois le même message d'erreur lorsque j'actualise la page. Comment résoudre ce problème?
source d'informationauteur Shiju K Babu | 2014-01-08
Vous devez vous connecter pour publier un commentaire.
Vous devez disposer d'un serveur de côté la solution pour rediriger tous les non-résolution de la circulation à index.html
Je vais partager un htaccess version de ce et une node.js version. J'ai également mis en œuvre le printemps-boot, mais c'est un peu plus impliqué.
HTACCESS
Dans l'ordre pour que cela fonctionne, votre configuration d'apache doit avoir le mod_rewrite activé et permettent également de remplacer toutes. La réécriture va travailler dans la config d'apache.
Il est aussi une condition qui vous permet de retourner une erreur 404 sur requête ajax. Pour que cela fonctionne, vous devez vous inscrire pour un vol pré-vol de l'en-tête de tous les $requête http pour indiquer qu'ils sont xmlhttp demandes. quelque chose comme:
NODEJS
C'est de la saleté simple, et pourrait être améliorée. C'est à dire avec un contrôle sur la req-têtes pour le xmlhttp en-tête, de la même façon à ce que le htaccess exemple est en train de faire.
Ces se faire une idée générale de partout. Fondamentalement, tout le trafic qui entraînerait une erreur 404 obtient servi index.html au lieu de cela. Cela vous permet de continuer à servir du contenu statique, mais vos itinéraires (tant qu'ils ne sont pas réellement exister sur le disque à cet endroit), sera de retour index.html.
Avertissement! sans une solution de contrôle en amont d'en-tête sur toutes les requêtes ajax, tout en suspens modèle de demande entraînera dans une boucle infinie et susceptibles de lock-up de votre navigateur.
Maintenant, ce doit être un problème commun Angulaire à traiter avec la fonction de routage.
J'ai trouvé des problèmes similaires, et qui suggèrent la même html5 config pour contourner le hashbang méthode - voir AngularJS: comment faire pour activer $locationProvider.html5Mode avec deeplinking
Également un tutoriel au scotch.io https://scotch.io/quick-tips/pretty-urls-in-angularjs-removing-the-hashtag peut être un début.
Mais plus important encore, je me souviens que c'est le seul qui a fait le tour.
https://gist.github.com/leocaseiro/4305e06948aa97e77c93
Je lance un serveur Web Apache. Je n'ai pas souvenir à quel niveau (globalement ou par application) j'ai fait de la configuration, mais le mieux serait de consulter le serveur web docs, Apache a été bonne.
Ce qui se passe parce que quand vous appuyez sur actualiser, votre navigateur va essayer de récupérer /connexion au serveur, et non par l'intermédiaire de votre côté client fournisseur d'itinéraire. Je suppose /connexion est de retourner une erreur 404 dans votre cas.
Vous avez besoin pour obtenir le serveur qui est en fait au service de vos fichiers pour servir /index.html même si la demande a été faite pour la connexion. Comment vous faites cela dépend de votre configuration côté serveur. Vous pouvez le faire avec dynamique de script ou d'une règle de réécriture.
Si vous ne pouvez pas contrôler le serveur de cette façon, alors htmlmode est probablement pas pour vous malheureusement.
ajouter "views/login.html" dans le côté de votre templateUrl espère que cela va fonctionner
ajouter ce code dans server.js après tout, les routes de
avez-vous essayez d'utiliser des chemins absolus dans les
$routeProvider
?