Misbehaviour on routes with Laravel 5.3 and AngularJS 1.5

Question

I try to create an app with Laravel 5.3 and AngularJS. I want to use the routes and templates from Angular instead of Laravel.

Here is the web.php file from Laravel:

Route::get('/', function () {
    return view('index');
});

And here is a part of the ui-router in AngularJS:

routeConfig.$inject = ['$stateProvider'];
function routeConfig ($stateProvider) {
  // Routes
  $stateProvider
    .state('home', {
      url: '/',
      templateUrl: 'app/views/home.html'
    })
    .state('register', {
      url: '/register?oauth_token&oauth_verifier',
      templateUrl: 'app/views/register.html',
      controller: 'RegisterController',
      controllerAs: 'registerCtrl'
    })
  };

I have also enabled the html5mode and the base url on head. The problem now:

When I am at home and click the link to go on register page, it works. But If I try to load directly the register page, it loads it through laravel routes and since I haven't mentioned anything about it there, I have a NotFoundHttpException.

score 1 · Accepted Answer · answered Dec 15 '16 at 10:14

That's because when you refresh all routes are handled by laravel first.

I had the same problem and there are 2 approaches:

either put the angular app on a different domain ... but you will run into CORS issues

or tell laravel to route any route to angular app, and that's easier

Route::any('{path?}', function()
{
    return view("index");
})->where("path", ".+");

Misbehaviour on routes with Laravel 5.3 and AngularJS 1.5

1 Answers1