Laravel and Angular have both become very well renowned tools in the web development world lately. Creating an application by using Laravel(Backend) and Angular(Frontend) as two projects, leads to manage more things and also add extra composer dependencies to handle CORS issue.

This blog shows how to integrate Angular into Laravel using Laravel Mix.

Setting Up Laravel

Follow the laravel installation instructions from Laravel official document.

First install the laravel globally by using composer and then create the new laravel app.

Once the project got created run it with the command

You will see the page to notify laravel application is running on port 8000

Setting Up Angular

Locate in resources directory “cd resources” and install the angular cli to create new angular app.

To install angular cli and create new angular app inside resource directory run below commands

You will see the page to notify angular application is on 4200 port

Integrate Angular into Laravel

Deleting Files

Move the “tsconfig.json” file from ts directory to sample-app.

Move the packages from “resources/ts/package.json” to “package.json” file and then remove the “resources/ts/package.json” file.

package.json

Run “npm install” to create “node_modules” in sample-app directory and to install all packages in node_modules.

Typescript Files

resources/ts/app/app.module.ts

resources/ts/app/app.component.ts

Creating Files

Create “vendor.ts” file in “ts” folder

resources/ts/vendor.ts

Create a custom config that links the “.ts” extension to the “awesome-typescript-loader” module to process TypeScript files. The “plugins” portion shown resolves to a certain folder (CORE_FOLDER) depending on the Angular version being installed

webpack-custom-config.js

Modify webpack.mix.js file to compile all angular components, modules and css into app.js, vendor.js and styles.css files.

webpack.mix.js

Modify ‘welcome.blade.php’ to load generated JS files and use a custom element for Angular application entry.

resources/views/welcome.blade.php

Note: Add “import ‘core-js/es7/reflect’;” to “polyfills.js” to resolve “Can’t resolve all parameters for ApplicationModule: (?)” issue.

After all files properly managed in there places, run the application with below commands

Now the Angular is integrated into Laravel. We can see both angular and laravel on same page by accessing 8000 port.