Laravel and Angular: Automated

Robert Brisita
Apr 23, 2019 · 4 min read
Image for post
Image for post

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

Image for post
Image for post
Deleting JS, Sass, and CSS files.

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

Changed Files

Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post
webpack.mix.js

Introduce TypeScript files and require a webpack custom config.

Image for post
Image for post
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

Image for post
Image for post
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).

Image for post
Image for post
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.

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

Test Install

npm run dev && php artisan serve

Image for post
Image for post
Laravel’s Artisan serving generated and templated files.

Conclusion

Webpack Loaders

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store