Question posted in
Some documentation to get you started can be found here.

How to route Laravel application with Angular 7 – Apache

I create a server with LAMP in local and I want to use Laravel for the backend and Angular 7 for the frontend.

I put this to my web.php file: 

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
        View::addExtension('html', 'php');
        return view('index');
});

And I put all my Angular files inside the /public/ folder, except the index.html which is inside the /resources/views.

And the reason is that: If you go to the site.com/ Angular will be loaded. If you click a link and go to the site.com/page for example, angular will load this page. Until here everything works as expected.

But if you just type site.com/page to your browser’s address bar, you are actually sending a request to site.com/page. As it doesn’t exist, web server will return a 404 and angular application will not work. Angular even didn’t get a chance to be loaded.

I know that it is caused because I have no route to /page inside de web.php file, but my question is how to solve this routing problem?

Thanks.

Tags:

2

Answers


  1. 0

    Use a fallback route.

    Using the Route::fallback method, you may define a route that will be executed when no other route matches the incoming request.

    Route::fallback(function () {
    //
});

    Make sure to put it at the end of your routes file, so that any existing routes (such as your API endpoints) match normally.

    Another common solution before the fallback route was added was to create a wildcard route using regular expression matching:

    Route::get('{any}', 'WildcardController@handle')->where('any', '.*');
    Login or Signup to reply.
  2. 0

    Sure, I’m going to walk you through the steps of setting up Laravel & Angular project,
    First you need to build your angular application using ng build and pass any flag like –prod to create in production mode or just use –ng build Don’t forget to change the folder where angular creates the final files, you can do it going to the angular.json and modify the outputPath”: “../server/public/client/”, like this.
    sencond: you need to go to to the public folder which was recenlty created by Angular and copy or move the index.html file to the view folder of laravel and paste it.
    third: you need to modify the script of angular pointing to the angular client folder in the public folder of laravel and that’s it.

    like this

    enter image description here
    my angular folder in this case is client
    there ya gooo
    you can also do this modifying the ng -build command or using an automation build tool such us Gulp, Grunt, and Webpack.
    I hope i can help you

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search