Angular 和 Laravel Apache / htaccess 规则答案

【问题标题】：Angular and Laravel Apache / htaccess RulesAngular 和 Laravel Apache / htaccess 规则
【发布时间】：2017-01-20 07:51:18
【问题描述】：

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

我在重写以使这项工作正常时遇到问题。

Angular 应用程序总是被重定向到它还需要调用一些 laravel API 路由的索引。

我只将 laravel 用于一些 API 路由

我在 HTML5 模式下使用带有 UI 路由器的 Angular。

我已将 laravel 应用设置为渲染：

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

在 Apache 或 HTaccess 中

我应该渲染 Angular HTML 文件还是渲染渲染 Angular HTML 文件的 index.php？

我的 Angular HTaccess 文件是选项 - 多视图

 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]

我尝试了几个选项。

我有各种 API 路由，Angular 应用程序在 laravel 上调用它们，它们都以 /api 开头，我想使用 UI State Ref 将这些从 Angular 应用程序重定向中排除

各位有什么想法吗？

我也应该使用服务器虚拟主机而不是 htaccess 文件，因为它比较慢？

感谢你们的帮助：）第一次发帖：）

【问题讨论】：

如果你使用 Laravel 作为 API，为什么要在 Laravel 中部署 Angular？
它在公用文件夹中，但完全独立。完美运行并保持分离但在同一个仓库中。
对此有什么想法吗？

标签： angularjs apache .htaccess mod-rewrite laravel-5

【解决方案1】：

有点晚了，但我遇到了同样的问题，如果其他人找到这个答案，可能会有用。我刚刚意识到为什么会发生这种情况并假设这种组合有效，您必须从仅用作 API 服务的 laravel 服务引导您的 Angular 应用程序。当 angular 与 laravel 共享相同的基本 url 时，问题就出现了。

例如，您的 laravel 托管并在 X 服务器中从这样的 url 启动 http://yourdomain.com/public/ 这是 Angular 应用程序的相同基本 url，因为您复制了所有内容 index.html（角度应用程序）并粘贴到主刀片通常称为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 冲突。

【讨论】：