diff --git a/README.md b/README.md
index 9016fbc..ca3732c 100644
--- a/README.md
+++ b/README.md
@@ -9,19 +9,31 @@ The sources for this package are in (https://github.com/vimalavinisha/angular2-g
       npm install angular2-google-chart
     bower install
       bower install google-chart
-###1.In index.html page include following script 
+###1. In index.html page include following script:
       <script src="https://www.gstatic.com/charts/loader.js"></script>
       <script>  
       !important: You want to give this variable(var googleLoaded = false;). This is used to run multiple chart in your jade.
         var googleLoaded = false;
         </script>
-###2.component file use like below
+###2. In app.module, import the included Angular2GoogleChartModule:
+      import { NgModule }       from '@angular/core';
+      import { BrowserModule  } from '@angular/platform-browser';
+      import { Angular2GoogleChartModule } from 'angular2-google-chart/angular2-google-chart';
+
+      import { AppComponent }   from './app.component';
+
+      @NgModule({
+          declarations: [AppComponent],
+          imports:      [BrowserModule, Angular2GoogleChartModule],
+          bootstrap:    [AppComponent]
+      })
+      export class AppModule {}
+
+###3. In your component file use like so:
       import {Component} from '@angular/core';
-      import {GoogleChart} from './directives/angular2-google-chart.directive';
-       
+
        @Component({
            selector : 'my-app',
-           directives: [GoogleChart],
            template:  `
            <div id="line_chart",[chartData]="line_ChartData", [chartOptions] = "line_ChartOptions",chartType="LineChart",GoogleChart/>
            <div id="bubble_chart",[chartData]="bubble_ChartData", [chartOptions] = "bubble_ChartOptions",chartType="BubbleChart",GoogleChart/>
@@ -145,5 +157,5 @@ The sources for this package are in (https://github.com/vimalavinisha/angular2-g
              height: 500
            };
        }
-###3 Example Charts
+###4. Example Charts:
       <img src="../app/assets/images/google-charts-output.png">
diff --git a/angular2-google-chart.js b/angular2-google-chart.js
new file mode 100644
index 0000000..4e3f08f
--- /dev/null
+++ b/angular2-google-chart.js
@@ -0,0 +1,40 @@
+System.register(['@angular/core', './directives/angular2-google-chart.directive'], function(exports_1, context_1) {
+    "use strict";
+    var __moduleName = context_1 && context_1.id;
+    var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    };
+    var __metadata = (this && this.__metadata) || function (k, v) {
+        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+    };
+    var core_1, angular2_google_chart_directive_1;
+    var Angular2GoogleChartModule;
+    return {
+        setters:[
+            function (core_1_1) {
+                core_1 = core_1_1;
+            },
+            function (angular2_google_chart_directive_1_1) {
+                angular2_google_chart_directive_1 = angular2_google_chart_directive_1_1;
+            }],
+        execute: function() {
+            Angular2GoogleChartModule = (function () {
+                function Angular2GoogleChartModule() {
+                }
+                Angular2GoogleChartModule = __decorate([
+                    core_1.NgModule({
+                        declarations: [angular2_google_chart_directive_1.GoogleChart],
+                        exports: [angular2_google_chart_directive_1.GoogleChart]
+                    }), 
+                    __metadata('design:paramtypes', [])
+                ], Angular2GoogleChartModule);
+                return Angular2GoogleChartModule;
+            }());
+            exports_1("Angular2GoogleChartModule", Angular2GoogleChartModule);
+        }
+    }
+});
+//# sourceMappingURL=angular2-google-chart.js.map
\ No newline at end of file
diff --git a/angular2-google-chart.js.map b/angular2-google-chart.js.map
new file mode 100644
index 0000000..7a15e31
--- /dev/null
+++ b/angular2-google-chart.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"angular2-google-chart.js","sourceRoot":"","sources":["angular2-google-chart.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;YAQA;gBAAA;gBAAwC,CAAC;gBAJzC;oBAAC,eAAQ,CAAC;wBACN,YAAY,EAAE,CAAC,6CAAW,CAAC;wBAC3B,OAAO,EAAO,CAAC,6CAAW,CAAC;qBAC9B,CAAC;;6CAAA;gBACsC,gCAAC;YAAD,CAAC,AAAzC,IAAyC;YAAzC,iEAAyC,CAAA"}
\ No newline at end of file
diff --git a/angular2-google-chart.ts b/angular2-google-chart.ts
new file mode 100644
index 0000000..c37ab05
--- /dev/null
+++ b/angular2-google-chart.ts
@@ -0,0 +1,9 @@
+import { NgModule }       from '@angular/core';
+import { BrowserModule  } from '@angular/platform-browser';
+import { GoogleChart }    from './directives/angular2-google-chart.directive';
+
+@NgModule({
+    declarations: [GoogleChart],
+    exports:      [GoogleChart]
+})
+export class Angular2GoogleChartModule {}
diff --git a/example/app.component.ts b/example/app.component.ts
index 47bda44..dce7cc2 100644
--- a/example/app.component.ts
+++ b/example/app.component.ts
@@ -1,12 +1,11 @@
-/* 
+/*
  * @author Vimala A
  */
 
 import {Component} from '@angular/core';
-import {GoogleChart} from '../directives/angular2-google-chart.directive';
+
 @Component({
     selector : 'my-app',
-    directives: [GoogleChart],
     template:  `
     <h2>  Gaugh Chart</h2>
     <div id="gauge_chart" [chartData]="gauge_ChartData" [chartOptions]= "gauge_ChartOptions" chartType="Gauge" GoogleChart></div>
@@ -19,13 +18,13 @@ import {GoogleChart} from '../directives/angular2-google-chart.directive';
     <h2>  Scatter Chart</h2>
     <div id="scatter_chart" [chartData]="scatter_ChartData"  [chartOptions] = "scatter_ChartOptions" chartType="ScatterChart" GoogleChart></div>
     <h2>  CandlestickChart</h2>
-    <div id="candle_chart" [chartData]="candle_ChartData" [chartOptions] = "candle_ChartOptions" chartType="CandlestickChart" GoogleChart></div>    
+    <div id="candle_chart" [chartData]="candle_ChartData" [chartOptions] = "candle_ChartOptions" chartType="CandlestickChart" GoogleChart></div>
     <h2>  Pie Chart</h2>
-    <div id="pie_chart" [chartData]="pie_ChartData" [chartOptions] = "pie_ChartOptions" chartType="PieChart" GoogleChart></div> 
+    <div id="pie_chart" [chartData]="pie_ChartData" [chartOptions] = "pie_ChartOptions" chartType="PieChart" GoogleChart></div>
     <h2>  Bar Chart</h2>
     <div id="bar_chart" [chartData]="bar_ChartData" [chartOptions] = "bar_ChartOptions" chartType="BarChart" GoogleChart></div>
-	
-	`    
+
+	`
 })
 export class AppComponent {
    public line_ChartData = [
diff --git a/example/app.module.ts b/example/app.module.ts
index 26e287e..e271c53 100644
--- a/example/app.module.ts
+++ b/example/app.module.ts
@@ -1,10 +1,12 @@
 import { NgModule }       from '@angular/core';
 import { BrowserModule  } from '@angular/platform-browser';
+import { Angular2GoogleChartModule } from '../angular2-google-chart';
+
 import { AppComponent }   from './app.component';
 
 @NgModule({
     declarations: [AppComponent],
-    imports:      [BrowserModule],
-    bootstrap:    [AppComponent],
+    imports:      [BrowserModule, Angular2GoogleChartModule],
+    bootstrap:    [AppComponent]
 })
 export class AppModule {}
diff --git a/package.json b/package.json
index cc4aaca..7bb5d78 100644
--- a/package.json
+++ b/package.json
@@ -1,18 +1,18 @@
 {
   "name": "angular2-google-chart",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "google chart directive for angular2",
   "main": "index.js",
   "dependencies": {
-    "@angular/common": "^2.0.0-rc.5",
-    "@angular/compiler": "^2.0.0-rc.5",
-    "@angular/core": "^2.0.0-rc.5",
-    "@angular/platform-browser": "^2.0.0-rc.5",
-    "@angular/platform-browser-dynamic": "^2.0.0-rc.5",
-    "@angular/upgrade": "^2.0.0-rc.5",
+    "@angular/common": "^2.0.0-rc.6",
+    "@angular/compiler": "^2.0.0-rc.6",
+    "@angular/core": "^2.0.0-rc.6",
+    "@angular/platform-browser": "^2.0.0-rc.6",
+    "@angular/platform-browser-dynamic": "^2.0.0-rc.6",
+    "@angular/upgrade": "^2.0.0-rc.6",
     "core-js": "^2.4.0",
     "reflect-metadata": "^0.1.3",
-    "rxjs": "5.0.0-beta.6",
+    "rxjs": "5.0.0-beta.11",
     "systemjs": "0.19.27",
     "zone.js": "^0.6.17"
   },
diff --git a/systemjs.config.js b/systemjs.config.js
index 9ae2969..60086c4 100644
--- a/systemjs.config.js
+++ b/systemjs.config.js
@@ -9,13 +9,13 @@
 //    'httpresource':               'node_modules/httpresource',
     '@angular':                   'node_modules/@angular',
     'rxjs':                       'node_modules/rxjs',
-    'directives' : 'directives/'
+    'angular2-google-chart':      './'
   };
   // packages tells the System loader how to load when no filename and/or no extension
   var packages = {
     'app':                        { main: 'main.js',  defaultExtension: 'js' },
     'rxjs':                       { defaultExtension: 'js' },
-    'directives':{ defaultExtension: 'js' } 
+    'angular2-google-chart':      { defaultExtension: 'js' } 
   };
   var ngPackageNames = [
     'common',