Angular和Laravel Apache / htaccess規則

Question

我正在Apache2 / Ubuntu 14上部署Angular和Laravel應用程序。

我在重寫方面遇到問題，無法正常工作。

角度應用程序總是被重定向到索引，它也需要調用一些laravel API路由。

我僅將laravel用於一些API路由

我在HTML5模式下將Angular與UI Router一起使用。

我將laravel應用程序設置為呈現：

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

在Apache或HTaccess中

我應該渲染Angular HTML文件還是渲染index.php來渲染Angular HTML文件？

我的Angular HTaccess文件是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}]

我的Apache虛擬主機文件是：

  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]

我正在嘗試一些選擇。

我在laravel上有角度應用程序調用的各種API路由，它們都以/ api開頭，我想使用UI狀態引用從角度應用程序重定向中排除這些路由

有想法嗎？

還應該使用服務器虛擬主機而不是htaccess文件嗎，因為它比較慢？

謝謝您的幫助:)第一次張貼海報:)

Answer 1

有點晚了，但是我遇到了同樣的問題，如果別人找到了這個答案，可能會有用。 我只是意識到了為什么會發生這種情況，並且假設這種組合有效，那么您必須從僅用作API服務的laravel服務中引導角度應用程序。 當angular與laravel共享相同的基本URL時，就會出現問題。

例如，您的laravel是托管的，並在X服務器中從類似http://yourdomain.com/public/的URL開始，因為您復制了所有內容index.html（Angular應用程序）並粘貼，所以它是angular應用程序的基本URL到通常稱為welcome.blade.php的主刀片模板（laravel應用）。 由於您沒有在角度路線中使用井號（＃），因此必須發生此問題。

可能在代碼中的某處您有類似以下內容：

RouterModule.forRoot(ROUTES) 

代替

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

解決此問題的另一種方法是使用HashLocationStrategy，該實現可以如下實現：

在app.module.ts中：

添加進口：

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

在NgMoudle提供程序中，添加：

{provide: LocationStrategy, useClass: HashLocationStrategy}

示例（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 {}

您的網址的兩種方法都將類似於：

http://yourdomain.com/public/#/route和該附加的井號（＃）符號可以避免URL沖突。