Grunt Task For Angular 2 With Remote Template URL -Tutorial Savvy

In my previous post We have learnt how to called the TypeScript Compiler-Watcher using NPM.In the previous post We have developed a Angular2 component with inline HTML template.
In this post We will create Angular 2 component with HTML template in a separate HTML file and can be called using templateUrl property.
In this demo, “We will learn to create Grunt Task to compile and watch Typescript file and move the template to build directory ”.
For this demo we have to install TSD package manager.You can check my previous post to know the installation of TSD package manager.Using TSD package we can install the Angular 2 Type definition file angular2.d.ts .
Grunt Task runner can be installed using npm install grunt --save-dev command.The following screenshot shows the terminal with Grunt installation.

We need to install Grunt Typescript plug in using npm install grunt-typescript --save-dev command.The following screenshot shows the terminal with Grunt Typescript plug in installation.

We need to install Grunt contrib copy plug in using npm install grunt-contrib-copy --save-dev command.The following screenshot shows the terminal with Grunt copy plug in installation.

To define Grunt Task we have to create Gruntfile.js in the project.The content of Gruntfile.js is as follows.

module.exports = function(grunt) {
    grunt.initConfig({
        typescript: {
            base: {
                src: [
                    'typings/tsd.d.ts',
                    'dev/components/*.ts',
                    'dev/app.ts'
                ],
                dest:'build',
                options: {
                    target:'ES5',
                    module:'commonjs',
                    sourceMap:true,
                    watch: {
                        after: ['copy'],
                        atBegin: true
                    }
                }
            }
        },
        copy: {
            main: {
                files:[
                    {   expand: true,
                        src: 'dev/templates/*',
                        dest: 'build/templates/',
                        flatten: true,
                        filter: 'isFile'
                    },
                    {
                        expand: true,
                        src: 'dev/index.html',
                        dest: 'build/',
                        flatten: true,
                        filter: 'isFile'
                    }
                ]

            }
        }
    });
    grunt.loadNpmTasks('grunt-typescript');
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.registerTask("default", ["typescript"]);
    grunt.registerTask("build", ["typescript"]);
};

The project has two main directories dev and build.The dev directory has components and templates directory with app.ts and index.html file.The project structure look like following screenshot.

The welcome-component.ts file is present inside dev/components directory has definition for welcome component.The content of welcome-component.ts file is as follows.

import {Component, View} from 'angular2/angular2';
@Component({
    selector: 'welcome'
})
@View({
    templateUrl: 'templates/welcome.html'
})
export class WelcomeComponent {
    name: string;
    constructor() {
        this.name = 'Sandeep';
    }
}

The dev/templates/welcome.html file contains the HTML markup template for welcome component.The content of welcome.html file is as follows.

<h1>Welcome {{ name }}</h1>

The app.ts file imports the welcome component code and bootstraps the welcome component.The content of app.ts is as follows.

import {bootstrap} from 'angular2/angular2';
import {WelcomeComponent} from 'components/welcome-component';

bootstrap(WelcomeComponent);

The index.html file contains the code to render the angular 2 component in browser.The following code shows the content of index.html file.

<html>
<head>
    <title>Angular 2 Grunt task Demo</title>
    <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
    <script src="https://jspm.io/system@0.16.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.22/angular2.dev.js"></script>
</head>
<body>
    <welcome></welcome>
    <script>System.import("app");</script>
</body>
</html>

The Grunt task can be started using Grunt build command.The following screenshot shows the terminal with Grunt task running.

For any change in typescript code the watcher will listen to changes of the code and generates the compiled JavaScript.The following screenshot shows the terminal with Grunt Typescript Watcher logs.

The Grunt task will generate the JavaScript code from typescript file and move the template and generated js to build directory.The following screenshot shows the updated project structure after build.