Angular and Laravel Apache / htaccess Rules

Question

I am deploying an Angular and Laravel Application on Apache2 / Ubuntu 14.

I am having issues with the rewrites to make this work ok.

The angular application is always redirected to the index it also needs to call some laravel API routes.

I am only using laravel for a few API routes

I am using Angular with UI Router in HTML5 mode.

I have set the laravel application to render:

 Route::get('/', function () {
     return File::get(public_path().'\index.html');
 });

In Apache or HTaccess

Should i render the Angular HTML file or render the index.php which renders the Angular HTML file?

My Angular HTaccess file is Options -MultiViews

 RewriteEngine On

# Redirect Trailing Slashes If Not A Folder...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)/$ /$1 [L,R=301]

# Handle Front Controller...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [L]

# Handle Authorization Header
RewriteCond %{HTTP:Authorization} .
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

My Apache Virtual Host File is:

  AllowOverride All
  RewriteEngine On
  RewriteBase /var/www/Website/public/
   #       RewriteCond     %{REQUEST_URI} ^(/index\.php|/img|/js|/css|/robots\.txt|/favicon\.ico)
 #       RewriteCond     %{REQUEST_FILENAME} !-f
 #       RewriteCond     %{REQUEST_FILENAME} !-d
 #       RewriteRule     ./index.html [L]
 #      RewriteCond %{REQUEST_FILENAME} !-d
 #      RewriteCond %{REQUEST_FILENAME} !-f
 #      RewriteRule ^ index.php [L]

#     # Don't rewrite files or directories
#       RewriteCond %{REQUEST_FILENAME} -f [OR]
#       RewriteCond %{REQUEST_FILENAME} -d
#       RewriteRule ^ - [L]
#
#        # Rewrite everything else to index.html to allow html5 state links
    RewriteRule ^ index.html [L]

I was trying a few options with this.

I have various API routes which the angular app calls on laravel, they all start with /api and i would like to exclude these from the angular app redirection using UI State Ref

Any ideas guys?

Also Should i be using server vhosts instead of a htaccess file as it is slower?

Thanks for your help guys :) First time poster :)

Answer 1

It's a little bit late, but I was stuck with the same issue and probably if someone else find this answer, could be useful. I just realized why this happens and assuming this combinations works, you must be bootstraping your angular app from laravel service which is only used as API service. The problem come arise when angular shares the same base url with laravel.

For example, your laravel is hosted and start in X server from an url like this http://yourdomain.com/public/ which is the same base url for angular app since you copied all content index.html (angular app) and pasted to the main blade template (laravel app) that usually is called welcome.blade.php. This issue must be happening since you are not using the hash (#) in your angular routes.

Probably in somewhere in your code you have something like :

RouterModule.forRoot(ROUTES) 

instead of

RouterModule.forRoot(AppRoutes, { useHash: true })

Another way to solve this is by using HashLocationStrategy that can be implemented as follows:

In app.module.ts:

Add imports:

import { HashLocationStrategy, LocationStrategy } from '@angular/common';

And in NgMoudle provider, add:

{provide: LocationStrategy, useClass: HashLocationStrategy}

Example (app.module.ts):

import { NgModule }       from '@angular/core';
import { BrowserModule  } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
import { HashLocationStrategy, LocationStrategy } from '@angular/common';
@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule],
    providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],
    bootstrap: [AppComponent],
})
export class AppModule {}

Both methods your urls gonna be like:

http://yourdomain.com/public/#/route and that additional hash (#) symbol is what avoid the URL conflict.