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冲突。