在ANgular JS1中页面刷新后的HTTP ERROR 404

Question

我使用http-server包来运行我的角度js项目。我的目录结构如下： -

angulardemo /应用程序/公共/控制器

angulardemo /应用程序/公共/ app.js

angulardemo /应用程序/公共/ index.html中

angulardemo /应用程序/公共/视图

我的app.js文件是

var app = angular.module('angulardemo', ['ngRoute', 'ngCookies'])
		.constant('API_URL', 'http://127.0.0.1:8001')
		.config(function ($routeProvider, $locationProvider, $httpProvider) {
			
			$httpProvider.defaults.headers.common = {'Content-Type' : 'application/json'};
			$httpProvider.defaults.headers.post = {};
			$httpProvider.defaults.headers.put = {};
			$httpProvider.defaults.headers.patch = {};

			/**
			 * 
			 * Checks for url access
			 */
			resolver = function (access){

				return {
					load: function($q, AuthService, $location){
						if(access){

							return true
						}else{

							if(AuthService.checkLogin()){

								return true;
							}
							else{

								$location.path("/login");
							}
						}
					}
				}
				
			}

			$routeProvider
			.when('/', {

				templateUrl : "/view/home.html",
				controller : 'PagesController'
			})
			.when('/home', {

				templateUrl : "/view/home.html",
				controller : 'PagesController'
			})
			.when('/about', {

				templateUrl : "/view/about.html",
				controller : 'PagesController'
			})
			.when('/team', {

				templateUrl : "/view/team.html",
				controller : 'PagesController'
			})
			.when('/work', {

				templateUrl : "/view/work.html",
				controller : 'PagesController'
			})
			.when('/price', {

				templateUrl : "/view/price.html",
				controller : 'PagesController'
			})
			.when('/users/:user_type', {

				templateUrl : "/view/developers.html",
				controller : 'UsersController'
			})
			.when('/user/show/:id', {

				templateUrl : "/view/user.details.html",
				controller : 'UsersController'
			})
			.when('/contact', {

				templateUrl : "/view/contact.html",
				controller : 'PagesController'
			})
	        .when('/register', {

	            controller: 'AuthController',
	            templateUrl: '/view/auth/register.html',
				resolve:{

					loggedIn: function(AuthService, $location){
						
						if(!AuthService.checkLogin())
							return true;
						else
							$location.path("/home");
					}
				}

	        })
	        .when('/login', {

	            controller: 'AuthController',
	            templateUrl: '/view/auth/login.html',
				resolve:{

					loggedIn: function(AuthService, $location){
						
						if(!AuthService.checkLogin())
							return true;
						else
							$location.path("/home");
					}
				}

	        })
			.when('/dashboard', {

	            controller: 'DashboardController',
	            templateUrl: '/view/dashboard/index.html',
				pageTitle: 'dashboard',
				resolve:resolver(false)
			})
			.when('/users_personal/:id', {

	            controller: 'UsersController',
	            templateUrl: '/view/users/personal.html',
				pageTitle: 'personal_details',
				resolve:resolver(false)
			})
			.when('/users_edu/:id', {

	            controller: 'UsersController',
	            templateUrl: '/view/users/edu.html',
				pageTitle: 'edu_details',
				resolve:resolver(false)
			})
			.when('/users_contact/:id', {

	            controller: 'UsersController',
	            templateUrl: '/view/users/contact.html',
				pageTitle: 'contact_details',
				resolve:resolver(false)
			})
			.when('/users_other/:id', {

	            controller: 'UsersController',
	            templateUrl: '/view/users/other.html',
				pageTitle: 'other',
				resolve:resolver(false)
			})
	        .when('/logout', {
				
				resolve : {
	            	logout: function ($routeParams, $location, $http, API_URL){
						$http.get(API_URL + "/api/auth/logout").success(function (response) {

							if(response === "OK"){
								
								localStorage.removeItem('auth');
								$location.path('/login').replace();
							}
						})
 	            	}
	            }
	        })
			.otherwise({
            	redirectTo: '/',
    		}); 
    		$locationProvider.html5Mode({
			 	enabled: true,
			  	requireBase: false
			}).hashPrefix('*');
		}).run(['$http', '$cookies', function($http, $cookies) {

			$http.defaults.headers.post['X-CSRFToken'] = $cookies.csrftoken;
		}]);

当我使用“http-server”在app目录命令中运行项目时，我得到了http://127.0.0.1:8080的网址  http://192.168.10.137:8080

所有网页都运行正常，但当我刷新页面时，我无法找到此127.0.0.1页面

找不到网址的网页：http://127.0.0.1:8080/team HTTP错误404

所以有人可以告诉我这里有什么不对的地方。并提供解决方案。

请参阅git hub中的目录结构： -

https://github.com/sanjaysamant/angulardemo/tree/local/app

Angular js文件位于公共目录

谢谢

请看终端屏幕截图：

Answer 1

每当您使用/team等子网址并刷新页面时，Node-Server会查找服务器上team文件夹中的HTML文件，即不是你想要的。您需要服务器将所有这些URL重定向到index.html，以便加载Angular应用程序，然后可以正确初始化正确的页面。

您可以在server.js文件中尝试以下操作：

//routes
app.use('/api/auth', require('./controllers/auth/auth.controller'));
app.use('/api/users', require('./controllers/users/users.controller'));
app.use('/api/user/', require('./controllers/users/users.controller'));
// Redirect unmatched routes (All specific routes such as /api/* need to be before this call)
app.use(redirectUnmatched);

function redirectUnmatched(req, res) {
  res.redirect("/");
}

Answer 2

@Chnoch建议的是正确的，但是我想给你一个不同的方法。

app.get('*', function(req, res)
{
    res.send('/path/to/index.html');
});

因为对页面的所有请求都是GET请求，所以您不需要指定POST，并且使用此方法它将保留您所在的当前URL（例如，如果您在http://127.0.0.1:8080/team上将刷新并仍然在/团队中），@ Chnoch的方法将始终将您重定向回http://127.0.0.1:8080/。

这将是针对Node服务器无法解决的任何请求，它只会呈现普通索引页面，然后由Angular的ngRoute处理以显示模板（您也可以使用模板引擎，如EJS或用这个Pug，只需用渲染函数替换res.send。

只需确保上述代码位于您希望由节点服务器解析的所有其他路由之后（例如您的API等），因此它不会干扰其后的路由，因为这是一个捕获所有路由