How can I implement Laravel 5.5 and Angular 4 project intogether?

Question

If I want to implement Angularjs 4 or 2 with Laravel 5.5 (angular will consume the API from laravel), what should be the best method? 1) Should I create two folders in xampp/htd

Answer 1

my approach is to make 2 completely separate projects one for Laravel and you should put it in your localhost root
and the other is for Angular and you can put it anywhere

Laravel Project

you will work only with routes and controllers no views required and for sure connecting to database, you can use Postman to test your REST APIs and functionality.

Angular Project

you will handle all front-end routes and views here you just call your back-end APIs (laravel project) to get and set data.

when you build the Angular project via ng build it will create a folder called dist this folder is the client side for your project you should point to it with you domain name once you deploy your project on any hosting service provider and for the Laravel project you may point to it with a subdomain

Example

you created a laravel project and hosted it at app.yourwebsite.com you created an Angular project and build it then uploaded the dist folder to yourwebsite.com

now when a user hits yourwebsite.com he will see the front-end of your angular app then in behind it calls app.yourwebsite.com via HTTP requests to get/set data

you can find more useful info and examples here https://laravel-angular.io/

Answering your questions

1- dist folder is created via ng build
2- you will upload the dist folder only as it contain all compiled angular app
3- any hosting server will be accepted because you will host JS/HTML files only so you don't need any compilers or nodejs/npm environment

Answer 2

what if you want to: have laravel website at: http://site.localhost and have an Angular admin inside that, at: http://site.localhost/admin

I tried to put resources at root of laravel public (assets & js), make my view in resources/views/admin with:

Route::get('/admin', function () {
    View::addExtension('html', 'php');
    return View::make('admin.index');
} )->name('admin');

and build with ng build --prod --aot --base-href /admin

the problem is now that the base href also applies to CSS, so loading fontawesome looks for: http://site.localhost/admin/assets/fonts/fontawesome-webfont.ttf?v=4.7.0

but my assets are on root of public not inside "admin", and if I add an "admin" folder inside public, I get a 'Forbidden' page on site.localhost/admin...