diff --git a/tooling/generators/page/page.tmpl.js b/tooling/generators/page/page.tmpl.js
index 753e82c4a4..01c437a675 100644
--- a/tooling/generators/page/page.tmpl.js
+++ b/tooling/generators/page/page.tmpl.js
@@ -1,4 +1,5 @@
-import {Page, NavController} from 'ionic-angular';
+import {Component} from '@angular/core';
+import {NavController} from 'ionic-angular';
 
 /*
   Generated class for the <%= jsClassName %> page.
@@ -6,7 +7,7 @@ import {Page, NavController} from 'ionic-angular';
   See http://ionicframework.com/docs/v2/components/#navigation for more info on
   Ionic pages and navigation.
 */
-@Page({
+@Component({
   templateUrl: 'build/<%= directory %>/<%= fileName %>/<%= fileName %>.html',
 })
 export class <%= jsClassName %> {
diff --git a/tooling/generators/page/page.tmpl.ts b/tooling/generators/page/page.tmpl.ts
index 87e38a7118..f1f161eaea 100644
--- a/tooling/generators/page/page.tmpl.ts
+++ b/tooling/generators/page/page.tmpl.ts
@@ -1,4 +1,5 @@
-import {Page, NavController} from 'ionic-angular';
+import {Component} from '@angular/core';
+import {NavController} from 'ionic-angular';
 
 /*
   Generated class for the <%= jsClassName %> page.
@@ -6,7 +7,7 @@ import {Page, NavController} from 'ionic-angular';
   See http://ionicframework.com/docs/v2/components/#navigation for more info on
   Ionic pages and navigation.
 */
-@Page({
+@Component({
   templateUrl: 'build/<%= directory %>/<%= fileName %>/<%= fileName %>.html',
 })
 export class <%= jsClassName %> {
diff --git a/tooling/generators/tabs/tabs.tmpl.js b/tooling/generators/tabs/tabs.tmpl.js
index 41b1072d2e..dd753a6fbf 100644
--- a/tooling/generators/tabs/tabs.tmpl.js
+++ b/tooling/generators/tabs/tabs.tmpl.js
@@ -1,8 +1,9 @@
-import {NavController, Page} from 'ionic-angular';
+import {Component} from '@angular/core';
+import {NavController} from 'ionic-angular';
 <% _.forEach(tabs, function(tab) { %>import {<%= tab.jsClassName %>} from '../<%= tab.fileName %>/<%= tab.fileName %>';
 <% }); %>
 
-@Page({
+@Component({
   templateUrl: 'build/<%= directory %>/<%= fileName %>/<%= fileName %>.html'
 })
 export class <%= jsClassName %> {
diff --git a/tooling/generators/tabs/tabs.tmpl.ts b/tooling/generators/tabs/tabs.tmpl.ts
index 36fa6086a0..64ccdf7270 100644
--- a/tooling/generators/tabs/tabs.tmpl.ts
+++ b/tooling/generators/tabs/tabs.tmpl.ts
@@ -1,8 +1,9 @@
-import {NavController, Page} from 'ionic-angular';
+import {Component} from '@angular/core';
+import {NavController} from 'ionic-angular';
 <% _.forEach(tabs, function(tab) { %>import {<%= tab.jsClassName %>} from '../<%= tab.fileName %>/<%= tab.fileName %>';
 <% }); %>
 
-@Page({
+@Component({
   templateUrl: 'build/<%= directory %>/<%= fileName %>/<%= fileName %>.html'
 })
 export class <%= jsClassName %> {