Browser get re-directed automatically in Angular.js App

[sourcebits-aamir]

The Gulp task is

gulp.task('bs', function() {
        browserSync.init(['build/index.html', 'build/templates/*.html', 'build/css/*css', 'build/js/*.js'], {
             proxy: {
                host: '127.0.0.1',
                port: '9000'
            }
        });
});

This task fires up the browser initially with the correct URL i.e. http://192.168.42.242:3002/#/login but it automatically redirects to http://192.168.42.242:3002/templates/login.html

My routes in Angular.js are defined as

var app = angular.module('myApp', ['ngResource', 'ngSanitize', 'ngRoute', 'ngAnimate', 'ui.router']);


app.config(['$routeProvider', '$httpProvider', '$stateProvider', '$urlRouterProvider', function ($routeProvider, $httpProvider, $stateProvider, $urlRouterProvider) {
    'use strict';


    $stateProvider
        .state('login', {
            url: '/login',
            templateUrl: 'templates/login.html'
        })

    $urlRouterProvider.otherwise('/login');

}]);

I cannot understand why there is a browser re-direct ? Or is it that I'm doing something wrong. Thanks :)

[shakyShane]

It looks like the Angular team made a decision to remove the X-Requested-With header from their ajax calls to retrieve template files....

BrowserSync ignores Ajax calls that have this header automatically - but when angular requests a view, something like /views/main.html, BrowserSync thinks you're trying to navigate to that page.

You have a couple of solutions right now - you can either disable link synchronization or configure your angular app to send the header mentioned above.

Disable link synchronization

gulp.task('bs', function() {
        browserSync.init(['build/index.html', 'build/templates/*.html', 'build/css/*css', 'build/js/*.js'], {
             proxy: {
                host: '127.0.0.1',
                port: '9000'
            },
            ghostMode: {
                links: false
            }
        });
});

Enable X-Requested-With header

myModule.config(function($httpProvider) {
  $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
});

You can read the thread about the decision to remove it here: angular/angular.js#1004

Also, always ensure you're on the latest version of BrowserSync too.

[shakyShane]

For any other Angular users out there, here's an example showing how you'd enable the header mentioned above.

'use strict';

angular.module('yourApp', [
        'ngCookies',
        'ngResource',
        'ngSanitize',
        'ngRoute'
    ])
    .config(function ($routeProvider, $httpProvider) {

        $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

        $routeProvider
            .when('/', {
                templateUrl: 'views/main.html',
                controller: 'MainCtrl'
            })
            .otherwise({
                redirectTo: '/'
            });
    });

[sourcebits-aamir]

Hi, This has solved the re-direction issue. Thanks... All my anchor tags are working but the click listeners set in JavaScript are not propagated in other devices.

Also in my form, I've kept few fields as "required" so once I enter the details in one of the devices, the other device shows "This field is required" and because of which the form is not submitted. Any ideas ?

[shakyShane]

The form synchronisation with angular apps is getting some attention soon. It's a WIP as mentioned here #60

[sourcebits-aamir]

Any ways this issue is fixed... All the best and I can see Browser Sync as a huge success in coming days... Best of luck 👍

[shakyShane]

Thanks :)

[hugooliveirad]

Sorry for the wrong commit message. My last commit tries to fix #64 instead.

[kevinSuttle]

Actually, that's not entirely true. If I use this:

$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

My route provider doesn't do any routing.

I'm still also getting the 'redirect to raw view file' behavior also.

Maybe I'm assuming everyone else is using ngRoute?
https://docs.angularjs.org/api/ngRoute

[kevinSuttle]

Actually, it's gotten worse. Any <a> element triggers it. It's kind of a nightmare. :/

[shakyShane]

Yeah - Support for SPAs is still terrible i'm afraid.

I've resorted to disabling ghostmode for the time being on any angular apps until I find some time to work on this.

[kevinSuttle]

That's ok. I can work with that. Thanks Shane.

[skorano]

Hi,

I've got the same issue.

But for me your solution doesn't work at all. Or maybe I'm doing it wrong?

var app = angular.module('app',[
    'ngRoute',
    'app.controllers',
    'app.directives',
]);

app.config(['$routeProvider','$httpProvider',
  function($routeProvider, $httpProvider) {
    $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
    $routeProvider.
        when('/courses', {
            templateUrl: 'public/partials/courses.html',
            controller: 'appCtrl'
        }).
        when('/course/:courseId', {
            templateUrl: 'public/partials/course.html',
            controller: 'appCtrl'
        }).
        when('/course/:courseId/:subjectId/:lessonId', {
            templateUrl: 'public/partials/player.html',
            controller: 'appCtrl'
        }).
            when('/course', {
            redirectTo: '/courses'
        }).
        when('/', {
            templateUrl: '/public/partials/index.html',
            controller: 'appCtrl'
        }).
            otherwise({
            redirectTo: '/'
        });
  }]);

[shakyShane]

@skorano - are you running the latest version of BrowserSync?

[shakyShane]

2.5.2

[skorano]

I suppose so.. But i don't know how to check it :)
I'm using Mixture on windows to host application on local server.

[shakyShane]

npm ls browser-sync

[skorano]

Ok, problem exist only on Mixture, on any other host server there is no problem with this. So for me is the end of an issue :)
Thanks @shakyShane

[brianfeister]

@shakyShane I'm running into this problem and I've already tried everything recommended here. I've set ghostMode: false and I'm using browserSync 2.7.1

[brianfeister]

As @kevinSuttle has mentioned, setting $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; in a .config() block has caused my app not to perform routing at all.