Laravel and Angular: Automated

Robert Brisita
Apr 23 · 4 min read

Most tutorials that mention Laravel and Angular create two separate projects: one for the frontend and one for the backend; this leaves more to manage and adding an extra composer dependency to handle the CORS issue. The purpose of this article is to show how to integrate Angular into a new Laravel project using Laravel Mix. Each version of Angular has particular dependencies and because of how npm works it can be a hassle getting it all right. What will be shown is what gets deleted, changed, and created. This article was possible using these articles:

TL;DR

Breakdown

Deleted Files

Deleting JS, Sass, and CSS files.

All JS and Sass files and their processed output are deleted.

Changed Files

Changing package.json.

The purpose is to show Angular working without any other noise; unneeded JS dependencies are removed as well as Bootstrap and Sass.

package.json for Laravel v5.5.45 with Angular v7.2.13.

The added packages are the bare essentials for Angular to work with Laravel Mix. Node package installs are found between lines 90 through 114 of the installation script.

webpack.mix.js

Introduce TypeScript files and require a webpack custom config.

resources/views/welcome.blade.php

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

Created Files

webpack-custom.mix.js

Create a custom config that links the ‘.ts’ extension to the ‘ts-loader’ module to process TypeScript files. The ‘plugins’ portion shown resolves to a certain folder (CORE_FOLDER) depending on the Angular version being installed (lines 222–232 of installation script).

tsconfig.json

Configure TypeScript and exclude folders from package managers.

The rest of the files are example TypeScript files using Angular components and modules. Where they reside depends on the Laravel version being used.

resources/[assets/]/ts/components/app.component.ts
resources/[assets/]/ts/components/app.module.ts
resources/[assets/]/ts/main.ts
resources/[assets/]/ts/vendor.ts

Test Install

npm run dev && php artisan serve

Laravel’s Artisan serving generated and templated files.

Conclusion

Webpack Loaders