Laravel 5 and Angular 2 Beta setup


Like i did some time ago for AngularJS i want to write a simple tutorial useful to setup a new application using Laravel 5.2 and Angular 2 together using the asset pipeline offered by Laravel.
We are going to setup the 5 mins quickstart of Angular 2 Beta into a Laravel view. We will use Laravel Elixir to create a basic gulp task to compile the Typescript Angular code and to move some file.

Let’s start. After creating the basic Laravel application as first thing we need to gather all the source needed to run Angular 2 Beta and the Typescript compiler. In the main folder of the newly created application you can find a package.json file. Modify it by adding some dependencies like show below.

{
  "private": true,
  "devDependencies": {
    "concurrently": "^1.0.0",
    "del": "^2.2.0",
    "gulp": "^3.8.8"
  },
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "bootstrap-sass": "^3.0.0",
    "elixir-typ
escript": "^1.1.2",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "laravel-elixir": "^4.0.0",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "systemjs": "0.19.6",
    "zone.js": "0.5.10"
  }
}

Now typing npm install in the console all the required file will be downloaded inside the node_modules folder. As you can see we added the requirements specified in the Angular site plus the elixir-typescript, a simple Elixir task to compile Typescript.

Once the installation is done we can start to add the typescript folder in the Laravel resource folder. Into this directory we will create the two files app.component.ts and boot.ts . Both file content is below ( same as shown on the Angular Beta 5 mins quickstart ).

import {Component} from 'angular2/core';
 
@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }
import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'
 
bootstrap(AppComponent);

Like said before we need to write a simple Elixir task to compile the Typescript. In the main folder of the application locate the gulpfile.js, open it and paste the code below inside it

var elixir = require('laravel-elixir');
 
var elixirTypscript = require('elixir-typescript');
 
elixir(function(mix) {
    mix.sass('app.scss');
 
    mix.copy('node_modules/angular2', 'public/angular2');
    mix.copy('node_modules/rxjs', 'public/rxjs');
    mix.copy('node_modules/systemjs', 'public/systemjs');
    mix.copy('node_modules/es6-promise', 'public/es6-promise');
    mix.copy('node_modules/es6-shim', 'public/es6-shim');
    mix.copy('node_modules/zone.js', 'public/zone.js');
 
    mix.typescript('app.js','public/','/**/*.ts',{
                  "target": "ES5",
                  "module": "system",
                  "moduleResolution": "node",
                  "sourceMap": true,
                  "emitDecoratorMetadata": true,
                  "experimentalDecorators": true,
                  "removeComments": false,
                  "noImplicitAny": false,
    });
 
 
});

Two things are important in the gulpfile. The first one is that we have copied all the tsconfig option from the 5mins tutorial and used as input in the Elixir Typescript plugin and the second is that we have a little problem to solve. The plugin concat all the javascript compiled file in a single app.js file. To avoid this behaviour we have to make a little modification to the node module we downloaded.

In the node_modules folder locate the elixir_typescript folder and inside it the index.js file. In the return function we have to comment the concatenation pipe.

new Task(pluginName, function () {
        var tsResult = gulp.src(assetPath + search)
            .pipe(ts(options, undefined, _laravelReporter.ElixirMessage()));
        return tsResult
            //  .pipe(concat(outputFileName))
              .pipe(gulp.dest(outputFolder));
 
 
    })

Now if you run gulp from the command line you will see a newly crated typescript folder into the public directory and also all the required dependency copied in the same place. If all is working till now we can ends the setup by placing the Angular 2 application inside the Laravel welcome view and start it using systemJS, nothing more then what is shown on the Angular site.

In the resource/view folder open the welcome.blade.php file and paste the code below into it (i’ve omitted the style tag )

<!DOCTYPE html>
<html>
    <head>
        <title>Laravel</title>
 
        <link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css">
        <!-- 1. Load libraries -->
 
 <script src="es6-shim/es6-shim.min.js"></script>
 <script src="/systemjs/dist/system-polyfills.js"></script>
 
  <script src="angular2/bundles/angular2-polyfills.js"></script>
  <script src="systemjs/dist/system.src.js"></script>
  <script src="rxjs/bundles/Rx.js"></script>
  <script src="angular2/bundles/angular2.dev.js"></script>
 
  <!-- 2. Configure SystemJS -->
  <script>
    System.config({
      "defaultJSExtensions": true,
      packages: {
        app: {
          format: 'register',
          defaultExtension: 'js'
        }
      }
    });
 
 
    System.import('app/boot')
          .then(null, console.error.bind(console));
  </script>
    </head>
    <body>
        <div class="container">
            <div class="content">
                <div class="title">Laravel 5</div>
                <my-app>Loading...</my-app>
            </div>
        </div>
    </body>
</html>

That’s all… Now if you  visit the application home page you will see under the Laravel 5 title the running Angular 2 application. This short tutorial show how to setup your first application using Laravel and Angular2. Some things need to be refined like the javascript destination folder and the needs to copy the node_modules to the public folder but it’s a good starting point to work with two of the best web application framework together int he same place.

Written by Akram Wahid 4 years ago

are you looking for a chief cook who can well craft laravel and vuejs, to make some awsome butterscotch,
yes then it is right time for you to look at my profile.

Do you want to write Response or Comment?

You must be a member of techalyst to proceed!

Continue with your Email ? Sign up / log in

Responses

Be the first one to write a response :(

{{ item.member.name }} - {{ item.created_at_human_readable }}

{{ reply.member.name }} - {{ reply.created_at_human_readable }}