diff --git a/src/app/components/noosfero-blocks/block.component.ts b/src/app/components/noosfero-blocks/block.component.ts
new file mode 100644
index 0000000..4eed39e
--- /dev/null
+++ b/src/app/components/noosfero-blocks/block.component.ts
@@ -0,0 +1,20 @@
+import { Input, Inject, Component } from 'ng-forward';
+
+@Component({
+    selector: 'noosfero-block',
+    template: '<div></div>'
+})
+@Inject("$element", "$scope", "$injector", "$compile")
+export class Block {
+
+    @Input() block: any;
+    @Input() owner: any;
+
+    ngOnInit() {
+        let blockName = this.block.type.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+        this.$element.replaceWith(this.$compile('<noosfero-' + blockName + ' block="ctrl.block" owner="ctrl.owner"></noosfero-' + blockName + '>')(this.$scope));
+    }
+
+    constructor(private $element: any, private $scope: ng.IScope, private $injector: ng.auto.IInjectorService, private $compile: ng.ICompileService) {
+    }
+}
diff --git a/src/app/components/noosfero-blocks/block.directive.js b/src/app/components/noosfero-blocks/block.directive.js
deleted file mode 100644
index 9738af0..0000000
--- a/src/app/components/noosfero-blocks/block.directive.js
+++ /dev/null
@@ -1,24 +0,0 @@
-(function() {
-  'use strict';
-
-  angular
-    .module('noosferoApp')
-    .directive('noosferoBlock', noosferoBlock);
-
-  /** @ngInject */
-  function noosferoBlock($compile) {
-    var directive = {
-      restrict: 'E',
-      scope: {
-          block: '<',
-          owner: '<'
-      },
-      link: function(scope, element) {
-        var blockName = scope.block.type.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-        element.replaceWith($compile('<noosfero-'+blockName+' block="block" owner="owner"></noosfero-'+blockName+'>')(scope));
-      }
-    };
-    return directive;
-  }
-
-})();
diff --git a/src/app/components/noosfero-boxes/box.html b/src/app/components/noosfero-boxes/box.html
index 6658633..4550503 100644
--- a/src/app/components/noosfero-boxes/box.html
+++ b/src/app/components/noosfero-boxes/box.html
@@ -4,7 +4,7 @@
       <h3 class="panel-title">{{block.title}}</h3>
     </div>
     <div class="panel-body">
-      <noosfero-block block="block" owner="ctrl.owner"></noosfero-block>
+      <noosfero-block [block]="block" [owner]="ctrl.owner"></noosfero-block>
     </div>
   </div>
 </div>
diff --git a/src/app/index.ts b/src/app/index.ts
index fa33a2d..1ae43d0 100644
--- a/src/app/index.ts
+++ b/src/app/index.ts
@@ -43,7 +43,6 @@ require("./components/auth/auth.service.js");
 require("./components/navbar/navbar.directive.js");
 require("./components/noosfero-activities/activities.component.js");
 require("./components/noosfero-activities/activity/activity.component.js");
-require("./components/noosfero-blocks/block.directive.js");
 require("./components/noosfero-blocks/link-list/link-list.component.js");
 require("./components/noosfero-blocks/main-block/main-block.component.js");
 require("./components/noosfero-blocks/members-block/members-block.component.js");
diff --git a/src/app/main/main.component.ts b/src/app/main/main.component.ts
index 769decd..04203e2 100644
--- a/src/app/main/main.component.ts
+++ b/src/app/main/main.component.ts
@@ -3,6 +3,7 @@ import {NoosferoArticleBlog} from "./../components/noosfero-articles/blog/blog.c
 import {ArticleDirective} from "../components/noosfero-articles/article/article.directive.ts";
 import {Profile} from "../profile/profile.component";
 import {Boxes} from "../components/noosfero-boxes/boxes.component";
+import {Block} from "../components/noosfero-blocks/block.component";
 
 @Component({
     selector: 'main-content',
@@ -15,7 +16,7 @@ export class MainContent {
 @Component({
     selector: 'main',
     template: '<div ng-view></div>',
-    directives: [NoosferoArticleBlog, ArticleDirective, Boxes]
+    directives: [NoosferoArticleBlog, ArticleDirective, Boxes, Block]
 })
 @StateConfig([
     {
--
libgit2 0.21.2