Angular и Laravel Apache / htaccess Правила

Question

Angular и Laravel Apache / htaccess Правила

0

Я развертываю приложение Angular и Laravel на Apache2/Ubuntu 14.

У меня возникают проблемы с перезаписыванием, чтобы сделать эту работу в порядке.

Угловое приложение всегда перенаправляется на индекс, он также должен вызывать некоторые маршруты API laravel.

Я использую только laravel для нескольких маршрутов API

Я использую Angular с UI Router в режиме HTML5.

Я установил приложение laravel для рендеринга:

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

В Apache или HTaccess

Должен ли я отображать Угловой HTML файл или отображать index.php, который отображает Угловой HTML файл?

My Angular HTaccess - это опции -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]

Я попробовал несколько вариантов с этим.

У меня есть различные маршруты API, которые угловые приложения требуют laravel, все они начинаются с /api, и я хотел бы исключить их из перенаправления углового приложения, используя UI State Ref

Любые идеи парней?

Также должен ли я использовать серверные vhosts вместо файла htaccess, поскольку он медленнее?

Спасибо за помощь, ребята :) Первый плакат :)

Logon 12 сен. 2016, в 21:56

Источник

0

Зачем развертывать Angular внутри Laravel, если вы используете Laravel в качестве API?
Marco Aurélio Deleu 12 сен. 2016, в 20:00
0

Это в общедоступной папке, но это совершенно отдельно. Работает отлично и сохраняет разделение, но в том же репо.
Logon 12 сен. 2016, в 20:39
0

Есть идеи по этому поводу?
Logon 13 сен. 2016, в 09:22

Показать ещё 1 комментарий

Теги:

angularjs

apache

.htaccess

mod-rewrite

laravel-5

1 ответ

Ещё вопросы

Зачем развертывать Angular внутри Laravel, если вы используете Laravel в качестве API?
Это в общедоступной папке, но это совершенно отдельно. Работает отлично и сохраняет разделение, но в том же репо.

Pedro Camargo · Answer 1 · 2019-01-16T17-48-00.000Z

Было немного поздно, но я застрял с той же проблемой, и, возможно, если кто-то еще найдет этот ответ, это может быть полезно. Я только что понял, почему это происходит, и, предполагая, что эти комбинации работают, вы должны загружать свое угловое приложение из сервиса laravel, который используется только как сервис API. Проблема возникает, когда angular разделяет один и тот же базовый url с laravel.

Например, ваш laravel размещается и запускается на X-сервере с URL-адреса, подобного этому http://yourdomain.com/public/, который является тем же базовым URL-адресом для углового приложения, поскольку вы скопировали весь контент index.html (угловое приложение) и вставили его к основному шаблону блейда (приложение laravel), который обычно называется welcome.blade.php. Эта проблема должна возникать, так как вы не используете хеш (#) в ваших угловых маршрутах.

Вероятно, где-то в вашем коде у вас есть что-то вроде:

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 {}

Оба метода ваши URL будут похожи:

http://yourdomain.com/public/#/route и этот дополнительный символ хеша (#) - это то, что позволяет избежать конфликта URL.