CODEWITHSUNDEEP
javascriptc#angularjswebasp.net-core
user4717662
user4717662

Reputation:

Browser page reload not working

I'm creating an ASP.NET Core SPA using AngularJS and C# (for the API) and I have a little issue regarding the page refresh.

For instance, I have my home page, with two links. Those links are: - Home (redirecting to: /home) - Clients (redirecting to: /clients)

The problem is, when I'm on the /clients route and I refresh my page (F5), after reloading I should have the same view as before reloading the page.

There's my code:

app.js

var app = null;

(function () {
'use strict';

appConfig.$inject = ['$routeProvider', '$locationProvider'];

app = angular.module('app', [
    'ngRoute',
    'ngResource'
]);

app.config(appConfig);

function appConfig($routeProvider, $locationProvider) {

    // Define the routes
    $routeProvider
        .when('/', {
            templateUrl: '/views/home.html',
            controller: 'homeController',
            title: 'Home'
        })
        .when('/clients', {
            templateUrl: '/views/clients.html',
            controller: 'clientsController',
            title: 'Clients'
        })
        .when('/clients/add', {
            templateUrl: '/views/addClient.html',
            controller: 'addClientController',
            title: 'Add new client'
        })
        .when('/404', {
            templateUrl: '/views/404.html',
            title: '404 Not found'
        })
        .otherwise({
            redirectTo: '/404'
        });

    $locationProvider.html5Mode(true);
}

app.run(['$rootScope', '$route', function ($rootScope, $route) {
    $rootScope.$on('$routeChangeSuccess', function () {
        document.title = 'Blume - ' + $route.current.title;
    });
}]);

})();

clientController.js

(function () {
    'use strict';

    angular
        .module('app')
        .controller('clientsController', clientsController);

    clientsController.$inject = ['$location', '$scope', '$resource', 'clientService']; 

    function clientsController($location, $scope, $resource, clientService) {
        $scope.clients = clientService.query();
    }

})();

clientService.js

(function () {
    'use strict';

    angular
        .module('app')
        .factory('clientService', clientService);

    clientService.$inject = ['$resource'];

    function clientService($resource) {
        return $resource('/api/client/:id');
    }

})();

web.config

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <modules runAllManagedModulesForAllRequests="true" />
    <rewrite>
      <rules>
        <!--Redirect selected traffic to index--> 
        <rule name="Index Rule" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_URI}" matchType="Pattern" pattern="^/api/" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

Upvotes: 0

Views: 847

Answers (1)

user4717662
user4717662

Reputation:

Unfortunatly, there is no fix for this for now. After some researches on google, I have found a GitHub issue that tells that the URL Rewrite on IIS is kinda broken.

https://github.com/aspnet/IISIntegration/issues/192#issuecomment-226012161

Good thing is the issue has been resolved and this feature will be available on the next .NET Core (1.1) release. It should be out by Fall 2016.

https://github.com/aspnet/Home/wiki/Roadmap

Upvotes: 0

Related Questions