刷新页面显示找不到文件错误如何使用 [angular js + NodeJS/ExpressJS] 解决
Posted
技术标签:
【中文标题】刷新页面显示找不到文件错误如何使用 [angular js + NodeJS/ExpressJS] 解决【英文标题】：Refreshing page shows file not found error how to resolve using [angular js + NodeJS/ExpressJS ] 【发布时间】：2017-05-16 06:47:36 【问题描述】：注意：我尝试了所有与此主题相关的问题和答案。像这样，我尝试了相关问题并尝试解决但没有成功。
我正在构建 angularJS 网络应用程序。纯基于AngularJS/HTML5和NodeJS/ExpressJS，数据库端使用mongo DB，就会出现这个问题。
我想要 '#' 删除 url 并刷新页面然后显示我的当前页面。但现在显示“未找到 404”。我这样使用$locationProvider.html5Mode(true); 和 <base href="/" /> 但我没有成功。
我知道在 URL 解决方案中删除 # 是
$locationProvider.html5Mode(true);and<base href="/" />但是我用 NodeJS/ExpressJS 然后我就不能用了。
我的网址
http://localhost:3000/Tutorial/Routing/StateProvider/index.html#/Setting/StudenList
我要网址
http://localhost:3000/Tutorial/Routing/StateProvider/index.html/Setting/StudenList
注意事项：
没有这个解决方案$locationProvider.html5Mode(true);and
<base href="/" /> 但是我使用 NodeJS/ExpressJS 然后我想删除 # 并解决刷新页面问题
代码
Folder Structure directive .我的代码很长，然后我管理 sn-p (inside html & js)。 不运行 sn-p，因为我插入所有代码只是为了了解我的代码有什么错误。
sample2(refreshissue) [Project Name]
-- Public
-- Tutorial
--Directive
-index.html
--Routing
--StateProvider
-Account.html
-index.html
-Setting.html
-StudentListing.html
-studentDetails.html
-StateProviderController.js
--Validation
-index.html
-index.html
-- StateProviderController.js
---------------------------------------------------------------------------------
var myapp= angular.module('myapp2',["ui.router"]);
myapp.config(function($stateProvider,$urlRouterProvider,$locationProvider,$urlMatcherFactoryProvider)
$urlMatcherFactoryProvider.strictMode(false);
$stateProvider
.state('TutorialHome',
url:'/index',
templateUrl:'/index.html'
)
.state('Profile',
url:'/Profile',
templateUrl:'Profile.html'
)
.state('Account',
url:'/Account',
templateUrl:'Account.html'
)
.state('Setting',
url:'/Setting',
templateUrl:'Setting.html'
)
.state('Setting.StudenListing',
url:'/StudenList',
views:
'StudenListing':
templateUrl: 'StudenListing.html',
controller:'StudentListingData'
)
.state('Setting.StudenListing.StudentList',
url:'/StudenList/:StudentID',
/* templateUrl: 'StudentDetails.html',
controller:'StudentDetails'*/
views:
'StudentDetails':
templateUrl: 'StudentDetails.html',
controller:'StudentDetails'
)
;
// $urlRouterProvider.otherwise('/index');
//$locationProvider.html5Mode(true);
);
myapp.controller('StateProviderCtrl',function($scope)
$scope.message ="Welcome To State Provider Page";
$scope.Home = function()
window.open('/',"_self");
);
myapp.controller('StudentListingData',function($scope,$http)
console.log('test');
$http.get('/StudenRecordData').success(function(response)
// console.log(response);
$scope.StudentRecorddata =response;
)
);
myapp.controller('StudentDetails',function($scope,$http,$stateParams)
$scope.StudentID = $stateParams.StudentID;
//console.log( $scope.StudentID);
$http.get('/StuentRecordSearch/'+ $stateParams.StudentID).success(function(response)
//console.log(response);
$scope.StuentDetails =response[0];
)
);
==================================================================================================================================================================
---- app.js
---------------------------------------------------------------------------------
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var url =require('url');
var index = require('./routes/index');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded( extended: false ));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', index);
/*var basepathArray = ['/Tutorial/Routing/StateProvider/','/Tutorial/Validation/','/Tutorial/Directive/'];
app.get('/!*',function(req,res)
var basePath ="";
for(var i=0;i<=basepathArray.length-1;i++)
if(req.originalUrl.search(basepathArray[i]) != -1)
basePath =basepathArray[i];
break;
if(basePath!="")
res.sendFile(path.resolve('public'+basePath+'index.html'));
else
res.sendFile(path.resolve('public/index.html'));
);*/
// catch 404 and forward to error handler
app.use(function(req, res, next)
var err = new Error('Not Found');
err.status = 404;
next(err);
);
// error handler
app.use(function(err, req, res, next)
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : ;
// render the error page
res.status(err.status || 500);
res.render('error');
);
module.exports = app;=================================================================================
-- Account.html
---------------------------------------------------------------------------------
<h1>Account page</h1>
=================================================================================
-- index.html
---------------------------------------------------------------------------------
<!DOCTYPE html>
<html ng-app="myapp2">
<title>Index | Angular Js</title>
<base href="/Tutorial/Routing/StateProvider/" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<!--<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.js"></script>
<script src="StateProviderController.js"></script>
<body ng-controller="StateProviderCtrl">
<nav class="navbar navbar-default row">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="TutorialHome"> State Routing</a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="Profile">Profile</a></li><!--State Transition on click-->
<li><a ui-sref="Account">Account</a></li><!--State Transition on click-->
<li><a ui-sref="Setting">Setting</a></li><!--State Transition on click-->
<li style="float: right;" ><a ng-click="Home()"> Home</a></li><!--State Transition on click-->
</ul>
</div>
</nav>
<div class="container" ng-controller="StateProviderCtrl">
<!-- we use ui-view instead of ng-view -->
<!--message<br>-->
<ui-view></ui-view>
</div>
</body>
</html>
=================================================================================
-- Profile.html
--------------------------------------------------------------------------------
<h1>Profile page</h1>
=================================================================================
-- Setting.html
---------------------------------------------------------------------------------
<div>
<h1>Setting page</h1>
<strong>This page shows Nested states & views. Click on below links to see Nested states in action.</strong><br>
<ul>
<li><a ui-sref="Setting.StudenListing">Show Listing</a></li>
</ul>
<div class="container">
<div class="row">
<div class="col-sm-12" style="background-color:beige;display: inline-block">
<div ui-view="StudenListing"></div>
</div>
</div>
</div>
</div>
<!-- <div ui-view="Descriptions"></div><br>
<div ui-view="Price"></div>-->
=================================================================================
-- StudentListing.html
---------------------------------------------------------------------------------
<!--<ui-view></ui-view>-->
<div class="row">
<div class="col-sm-6" style="background-color:beige;">
<h2>Student Listing</h2>
<p>All Talented Student List</p>
<table class="table" >
<thead>
<tr>
<th>Name</th>
<th>Eduction</th>
<th>Email ID</th>
<th>Details <!--<div ui-view="StudentDetails"></div>--></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in StudentRecorddata">
<td>data.Name</td>
<td>data.Eduction</td>
<td>data.Email </td>
<td><button type="button" class="btn btn-info" ui-sref="Setting.StudenListing.StudentList(StudentID:$index)">View Details</button> </td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm-6" style="background-color:beige;">
<!-- <div ui-view="StudenListing"></div>-->
<div ui-view="StudentDetails"></div>
</div>
</div>
=================================================================================
-- studentDetails.html
------------------------------------------------------------------------------<div>
<h2>Student Details </h2>
<br>
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Stuent Id:</label>
<div class="col-sm-10">
<p class="form-control-static">StudentID</p>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Name:</label>
<div class="col-sm-10">
<p class="form-control-static">StuentDetails.Name</p>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Age:</label>
<div class="col-sm-10">
<p class="form-control-static">StuentDetails.Age</p>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Eduction:</label>
<div class="col-sm-10">
<p class="form-control-static">StuentDetails.Eduction</p>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Email:</label>
<div class="col-sm-10">
<p class="form-control-static">StuentDetails.Email</p>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">MobileNumber:</label>
<div class="col-sm-10">
<p class="form-control-static">StuentDetails.MobileNumber</p>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Gender:</label>
<div class="col-sm-10">
<p class="form-control-static">StuentDetails.Gender</p>
</div>
</div>
</form>
</div>【问题讨论】：
能否请您说一下您是如何以角度路由服务的，路由中的node.js请求url以解决此问题 感谢您的回答。我尝试了您的代码。但是此代码在单页中重定向。例如，我仍然在页面localhost:3000/Tutorial/Routing/StateProvider/Setting/StudenList/StudenList/1 中工作，现在我刷新页面然后重定向 public/index.html 页面 localhost:3000。 【参考方案1】：这是因为接收请求的 Web 服务器会在服务器上查找与完整 url 匹配的资源，该资源不存在，因为 url 的 angular 部分指的是 angular 应用程序中的路由，需要在客户端浏览器
解决这个问题的方法是将所有虚拟 url 重写到主要的 angular index.html 文件
AngularJS + NodeJS/ExpressJS - 在 html5 模式下刷新页面后防止 404 错误的路由
var express = require('express');
var path = require('path');
var router = express.Router();
// serve angular front end files from root path
router.use('/', express.static('app', redirect: false ));
// rewrite virtual urls to angular app to enable refreshing of internal pages
router.get('*', function (req, res, next)
res.sendFile(path.resolve('app/index.html'));
);
module.exports = router;
AngularJS + IIS - URL 重写规则以防止在 html5 模式下刷新页面后出现 404 错误（对于 apache click here）
<rewrite>
<rules>
<rule name="AngularJS" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="REQUEST_FILENAME" matchType="IsFile" negate="true" />
<add input="REQUEST_FILENAME" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
Referred from
解决此问题的其他方法
https://***.com/a/34817349/2218635
【讨论】：
但他说他使用 Apache 作为静态文件/Web 服务器 感谢您的回答。你的解决方案我已经三合会了。但没有成功。这个解决方案重定向到单页。但我想刷新任何页面然后显示当前页面 请获取当前url并发送 我也尝试过，但我想在刷新后获得类似 'localhost:3000/Tutorial/Routing/StateProvider/Setting/…' 的链接，然后 404 File Not Found 。但我像这样在 url 中添加 # 'localhost:3000/Tutorial/Routing/StateProvider/#/Setting/…' 然后完全工作。但我想删除 url 中的 # 并刷新我的页面 一个问题我创建了一个 .htaccess 文件，但我这个文件移动了公共目录。所以htacces文件的位置是对还是错？？如果错了，请告诉我将 htacces 文件放在节点 js 服务器中的哪个位置【参考方案2】：这就是我的应用程序所拥有的。
来自API docs 用于 HTML5 模式
如果（HTML5 模式已启用）且 requireBase 为 true，并且 base tag 不存在，$location 时会抛出错误 注入。
所以，您需要base 标签。我已经尝试不使用基本标签和 requireBase 为假，但它似乎仍然对我抛出错误。
index.html
<head>
<base href="/">
</head>
app.route.js[Angular.js]
app.config(function($stateProvider, $urlRouterProvider, $locationProvider)
// This removes '#' and makes URL pretty
$locationProvider.html5Mode(
enabled: true,
requireBase: true
);
// Default path if nothing is matched. State would become 'landing'
$urlRouterProvider.otherwise('/');
$stateProvider
.state('landing',
url: '/',
templateUrl: "/dashboard/landing/templates/index.html",
controller: 'LandingController'
).state('about',
url: '/about',
templateUrl: "/dashboard/about/templates/index.html",
controller: 'AboutController'
);
);
一旦您将自己从'landing' 重定向到'about' 状态并且路由更改为/about，URL 仅在浏览器上更改，服务器不知道这一点。因此，当您刷新时，服务器不知道/about 路径是什么意思。因此，您需要将 /about 路径（或属于 angular 路由的任何路径）重定向到 index.html，然后 angular 会自动将您重定向回 /about。
app.js[Express.js]
// dashboard route should deliver templates instead of loading angular JS app so this should come before the next one
app.use('/dashboard', express.static(__dirname + '/public/dashboard'));
// put all the API methods here and separate from the redirection to `index.html`
app.use('/api', routes.apiRoutes);
// all the paths that do not start with `/dashboard` or `/api` is/should be angular route and thus, redirect back to `index.html`
app.get('*', function (req, res)
res.sendFile(__dirname + '/public/index.html');
);
旁注
在另一个应用程序上，我发现刷新浏览器会在路径末尾附加一个斜杠 (/)，并且在重定向之后，Angular 应用程序无法识别来自 url /about 的路径vs /about/ 所以它把我重定向回了登陆页面。
我通过在 app.route.js
中添加这个来解决这个问题$urlMatcherFactoryProvider.strictMode(false);
希望对你有帮助
【讨论】：
感谢您的回答，我尝试了您的代码，但此代码在单页中重定向。比如我仍然在页面http://localhost:3000/Tutorial/Routing/StateProvider/Setting/StudenList/StudenList/1工作，现在我刷新页面然后重定向public/index.html页面http://localhost:3000/。
我想刷新任何页面然后仍然网页上的网页不重定向任何单个页面...谢谢
添加console.log(req.originalUrl);在你的快递。刷新页面时显示什么？
1 票赞成 Your Code working in redirect single page 。我的问题仍然存在...
@Sumitpatel 你应该更新代码，这样我才能看到不正确的地方。【参考方案3】：
您必须在 application-configuration.js 文件中进行如下更改：
请找到这部分：“indexController”
var indexController = function ($scope, $rootScope, $http, $location, blockUI)
var baseUrl="/Tutorial"; //here it will be your site name
只需在您的 url 链接中添加这个 baseUrl。
【讨论】：
【参考方案4】：嗯...这个问题是每个人在开始使用 node.js 和 angular 时都可能遇到的问题。
第一个问题是 url 中的“#”，就像每个人建议的那样，就这样做
$locationProvider.html5Mode(true);
现在刷新问题将会发生，预期......再次。
为什么会这样？
请求被发送到 node.js 服务器，并且没有任何东西可以阻止它。
如何解决？
只需确保将相应的尾随请求映射到主角度视图即可。如果整个程序只有一个ng-app，那么只需重定向到主视图。
在你的 node.js 服务器上添加类似的东西
app.get('/', function(req, res)
res.sendFile(__dirname + '/index.html');
);
app.get('/*', function(req, res)
res.sendFile(__dirname + '/index.html');
);
这里index.html 是我的主视图，它链接到存在路由代码的主控制器文件。如果我尝试加载/about，它将转到控制器，然后控制器将加载特定视图。
这是解决此问题的非常简单的方法。
【讨论】：
感谢您的回答。我试试你的代码。删除 url 中的# 就可以了。但现在我刷新页面然后出现类似ENOENT: no such file or directory, stat 'c:\Users\Sumit\IdeaProjects\sample2(refreshissue)\index.html'.. 的错误
主视图的名称是什么。我在那里标记的 index.html 应该是调节其他视图的主文件。请确保将主文件指向它。其他一切都会正常工作。更新我这个。关注。
是的，我试过了。但同样的错误。我定义了我的文件夹指令。我的主文件夹 public 和 index.html 页面内。我的问题中的文件夹结构更新。不解决刷新问题。
上面列出的目录结构中有4-5个index.html。哪个是您的主要 index.html，通过哪些其他视图加载？只是参考它。 @Sumitpatel
我希望你不明白我的问题......？因为我在不同的 Directive folder 和 routing folder index.html 中使用了超过 2 个状态提供程序。我刷新任何页面然后不重定向main index.html 我重定向到当前页面。但现在我刷新链接http://localhost:3000/Tutorial/Routing/StateProvider/index.html#/Setting/StudenList 然后page not fund error are there以上是关于刷新页面显示找不到文件错误如何使用 [angular js + NodeJS/ExpressJS] 解决的主要内容，如果未能解决你的问题，请参考以下文章