Angular2 Laravel 'Hello World' App

This exercise started out with this example Angular2/Laravel, which I could not get working.

While using the base structure from the above example I made some changes to get things running.

With a fresh Laravel install I made changes to package.json, and gulpfile.js, added some files and folders to /resources/assets and finally made some changes to welcome.balde.php and because I could not get things running I had to make some manual changes to the transpiled boot.js file.

The contents of package.json that worked for me was

{
    "private": true,
    "devDependencies": {
        "gulp": "^3.8.8",
        "concurrently": "^2.0.0"
    },
    "dependencies": {
        "laravel-elixir": "^4.0.0",
        "bootstrap-sass": "^3.0.0",
        "elixir-typescript": "~2.0.0",
    
        "angular2": "2.0.0-beta.11",
        "systemjs": "0.19.24",
        "es6-promise": "^3.0.2",
        "es6-shim": "^0.35.0",
        "reflect-metadata": "0.1.2",
        "rxjs": "5.0.0-beta.2",
        "zone.js": "0.6.4"
    }
}

For the gulpfile.js file the mix.sass() and the six mix.copy()'s were not changes but the signature for mix.typescript() has changed.

The new signature is

mix.typescript(src, output, options);

The content of my gulpfile.js ended up as this

var elixir = require('laravel-elixir');
var elixirTypscript = require('elixir-typescript');

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for our application, as well as publishing vendor resources.
 |
 */

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.component.ts',
            'boot.ts'
        ],
        'public/',
        {
            "target": "es5",
            "module": "system",
            "moduleResolution": "node",
            "sourceMap": true,
            "emitDecoratorMetadata": true,
            "experimentalDecorators": true,
            "removeComments": false,
            "noImplicitAny": false
        }
    );

});

The elixir-typescript library will transpile the various .ts files into a single .js output file. So keeping with the idea of having one .js output file for each .ts input file there does need to be a change to the /node_modules/elixir-typescript/index.js file as described in the tutorial mentioned earlier. For the version of elixir-typescript that is used, v 2.0.0 here, the line of code that needs to be commented out is .pipe($.concat(paths.output.name)) as shown in this excerpt from /node_modules/elixir-typescript/index.js

            .pipe(ts(tsProject == null ? options : tsProject)
                .on('error', function(e) {
                    new Elixir.Notification().error(e, 'TypeScript Compilation Failed!');

                    this.emit('end');
                }))
            // .pipe($.concat(paths.output.name)) //HERE IS THE LINE THAT WAS COMMENTED OUT
            .pipe($.if(config.production, $.uglify()))
            .pipe($.if(config.sourcemaps, $.sourcemaps.write('.')))

As a disclaimer, I really do not know enough to explain why this works, but I do know that it works for my setup. Now the elixir-typescript transpiler will keep the .ts input files in individual .js output files.

With the above done it is time to turn to the app.component.ts and boot.ts files. These are the files that elixir-typescript will want to transpile and they should be located in /resources/assets/typescript/.

Create the directory typesript in /resources/assets and then in the new folder create app.component.ts and boot.ts. I made no changes to the content of the app.component.ts file but there were changes to the boot.ts file. I was having issues with the typescript transpiler not finding a reference to items such as Promise, Iterator and a few other items. To get rid of these errors I added a line to the top of the boot.ts file.

///<reference path="../../../node_modules/angular2/typings/browser.d.ts"/>

The reference you use may be different but in fresh laravel install this should work. For welcome.blade.php the script files that are referenced are

        <script src="es6-shim/es6-shim.min.js"></script>
        <script src="systemjs/dist/system-polyfills.js"></script>
        <script src="angular2/es6/dev/src/testing/shims_for_IE.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>

and the code to get things up and running on the client is

        <script>
            System.config({
                "defaultJSExtensions": true,
                packages: {
                    app: {
                        format: 'register',
                        defaultExtension: 'js'
                    }
                }
            });
            
            System.import('boot')
                .then(null, console.error.bind(console));
        </script>

Do not forget to add the <my-app><h2>Loading...</h2></my-app> to the body of the html.