Подтвердить что ты не робот

Обновление страницы показывает, что файл не найден, как решить проблему с помощью [angular js + NodeJS/ExpressJS]

Примечание: Я пробовал все вопросы и отвечал на эту тему. Подобно этому и я пробовал смежные вопросы и пытался решить проблему, но не успел.

Я создаю веб-приложение angularJS. Это чисто основано на AngularJS/HTML 5 и NodeJS/ExpressJS и стороне базы данных mongo DB, тогда эта проблема возникает.

Я хочу '#' удалить URL-адрес, а затем обновить страницу, а затем отобразить текущую страницу. Но сейчас отобразите "Не найдено 404". Я использую как $locationProvider.html5Mode(true); и <base href="/" /> но я не успеваю.

Я знаю, что удалить # в решении URL $locationProvider.html5Mode(true); и <base href="/" /> Но я использую NodeJS/ExpressJS, тогда я не могу использовать.

Мой URL

http://localhost:3000/Tutorial/Routing/StateProvider/index.html#/Setting/StudenList

Я хочу URL

http://localhost:3000/Tutorial/Routing/StateProvider/index.html/Setting/StudenList

Примечания:

Без этого решения $locationProvider.html5Mode(true); и   <base href="/" /> Но я использую NodeJS/ExpressJS. Затем я хочу удалить # и обновить проблему с проблемой страницы.

Код

Folder Structure directive.my код очень длинный, тогда я обмениваюсь фрагментом (внутри html и js). Не запускать фрагмент, потому что я вставляю весь свой код только для того, чтобы понять, что является ошибкой моего кода.

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>
4b9b3361

ОТВЕТЫ

Ответ 1

Это связано с тем, что веб-сервер, получающий запрос, ищет ресурс, соответствующий полному URL-адресу на сервере, которого нет, потому что часть angular URL-адреса относится к маршруту в вашем приложении angular и требует для обработки в браузере клиента

Способ исправить это путем перезаписи всех виртуальных URL-адресов в основной файл angular index.html

AngularJS + NodeJS/ExpressJS - Маршруты для предотвращения ошибки 404 после обновления страницы в html5mode

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 Rewrite Rule для предотвращения ошибки 404 после обновления страницы в html5mode (для apache нажмите здесь)

<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>

Ссылка на

дополнительный способ исправить это

fooobar.com/questions/252434/...

Ответ 2

Это то, что у меня есть для моего приложения.

Из API-документов для режима HTML5

если (режим HTML5) включен, а requireBase - true, а базовый тега нет, ошибка будет выбрана, когда $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 path. Таким образом, вам нужно перенаправить путь /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);

Я надеюсь, что это поможет

Ответ 3

Вы должны изменить файл application-configuration.js следующим образом:

найдите эту часть: "indexController" 

var indexController = function ($scope, $rootScope, $http, $location, blockUI) {
            var baseUrl="/Tutorial"; //here it will be your site name
}

просто добавьте этот baseUrl в ссылку url.

Ответ 4

Ну... эта проблема - это то, что каждый мог встретить при запуске с node.js вместе с angular.

Первая проблема - это "#" в URL-адресе, и, как все предлагали, просто сделайте это

$locationProvider.html5Mode(true);

Теперь проблема обновления, ожидаемая... снова.

Почему это происходит?

Запрос отправляется на сервер node.js, и для его предотвращения нет ничего.

Как его решить?

Просто убедитесь, что соответствующие трейлинг-запросы сопоставлены с основным представлением angular. Если у вас есть только одна 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, он перейдет к контроллеру, а затем контроллер загрузит конкретное представление.

Это очень простой способ решить эту проблему.