diff --git a/components/accordion/accordion-group.component.ts b/components/accordion/accordion-group.component.ts
index 0c88134275..b0e70213f1 100644
--- a/components/accordion/accordion-group.component.ts
+++ b/components/accordion/accordion-group.component.ts
@@ -1,7 +1,7 @@
 import {
   Component, OnInit, OnDestroy, Input, HostBinding, Inject
-} from 'angular2/core';
-import {NgClass} from 'angular2/common';
+} from '@angular/core';
+import {NgClass} from '@angular/common';
 import {CollapseDirective} from '../collapse';
 import {AccordionComponent} from './accordion.component';
 
diff --git a/components/accordion/accordion.component.ts b/components/accordion/accordion.component.ts
index baac7d249a..11e00b2e26 100644
--- a/components/accordion/accordion.component.ts
+++ b/components/accordion/accordion.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input, HostBinding} from 'angular2/core';
+import {Component, Input, HostBinding} from '@angular/core';
 import {AccordionPanelComponent} from './accordion-group.component';
 
 // todo: support template url
diff --git a/components/alert/alert.component.spec.ts b/components/alert/alert.component.spec.ts
index 7be233b6eb..fd5b8246f7 100644
--- a/components/alert/alert.component.spec.ts
+++ b/components/alert/alert.component.spec.ts
@@ -1,8 +1,9 @@
-import {it, beforeEach, injectAsync, TestComponentBuilder, ComponentFixture} from 'angular2/testing';
+import {it, beforeEach, injectAsync } from '@angular/core/testing';
+import { TestComponentBuilder, ComponentFixture } from '@angular/compiler/testing';
 import {AlertComponent} from './alert.component';
 
 describe('Component: Alert', () => {
-    let fixture:ComponentFixture, context:any;
+    let fixture:ComponentFixture<any>, context:any;
     const overTemplate = `
                   <div class="alert" role="alert" [ngClass]="classes" *ngIf="!closed">
                     <button *ngIf="dismissible" type="button" class="close" (click)="onClose()" (touch)="onClose()">
@@ -16,7 +17,7 @@ describe('Component: Alert', () => {
         return tcb
             .overrideTemplate(AlertComponent, overTemplate)
             .createAsync(AlertComponent)
-            .then((f:ComponentFixture) => {
+            .then((f:ComponentFixture<any>) => {
                 fixture = f;
                 context = fixture.debugElement.componentInstance;
             });
diff --git a/components/alert/alert.component.ts b/components/alert/alert.component.ts
index bab2084c50..67ca76f061 100644
--- a/components/alert/alert.component.ts
+++ b/components/alert/alert.component.ts
@@ -1,5 +1,5 @@
-import {Component, OnInit, Input, Output, EventEmitter} from 'angular2/core';
-import {NgIf, NgClass} from 'angular2/common';
+import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
+import {NgIf, NgClass} from '@angular/common';
 
 const ALERT_TEMPLATE = `
   <div class="alert" role="alert" [ngClass]="classes" *ngIf="!closed">
diff --git a/components/buttons/button-checkbox.directive.ts b/components/buttons/button-checkbox.directive.ts
index 672666a561..8d5daa932f 100644
--- a/components/buttons/button-checkbox.directive.ts
+++ b/components/buttons/button-checkbox.directive.ts
@@ -1,7 +1,7 @@
 import {
   Directive, OnInit, Input, HostBinding, HostListener, Self
-} from 'angular2/core';
-import {ControlValueAccessor, NgModel} from 'angular2/common';
+} from '@angular/core';
+import {ControlValueAccessor, NgModel} from '@angular/common';
 
 @Directive({selector: '[btnCheckbox][ngModel]'})
 export class ButtonCheckboxDirective implements ControlValueAccessor, OnInit {
diff --git a/components/buttons/button-radio.directive.ts b/components/buttons/button-radio.directive.ts
index 8b76a9cff8..82bb9936cc 100644
--- a/components/buttons/button-radio.directive.ts
+++ b/components/buttons/button-radio.directive.ts
@@ -1,7 +1,7 @@
 import {
   Directive, OnInit, Input, HostBinding, HostListener, Self, ElementRef
-} from 'angular2/core';
-import {ControlValueAccessor, NgModel} from 'angular2/common';
+} from '@angular/core';
+import {ControlValueAccessor, NgModel} from '@angular/common';
 
 @Directive({selector: '[btnRadio][ngModel]'})
 export class ButtonRadioDirective implements ControlValueAccessor, OnInit {
diff --git a/components/carousel/carousel.component.ts b/components/carousel/carousel.component.ts
index 21dba6f606..a0f1b06975 100644
--- a/components/carousel/carousel.component.ts
+++ b/components/carousel/carousel.component.ts
@@ -1,7 +1,7 @@
 // todo: add animate
 
-import {Component, OnDestroy, Input} from 'angular2/core';
-import {NgFor} from 'angular2/common';
+import {Component, OnDestroy, Input} from '@angular/core';
+import {NgFor} from '@angular/common';
 import {Ng2BootstrapConfig, Ng2BootstrapTheme} from '../ng2-bootstrap-config';
 import {SlideComponent} from './slide.component';
 
@@ -36,7 +36,7 @@ const NAVIGATION:any = {
   template: `
     <div (mouseenter)="pause()" (mouseleave)="play()" class="carousel slide">
       <ol class="carousel-indicators" *ngIf="slides.length > 1">
-         <li *ngFor="#slidez of slides" [class.active]="slidez.active === true" (click)="select(slidez)"></li>
+         <li *ngFor="let slidez of slides" [class.active]="slidez.active === true" (click)="select(slidez)"></li>
       </ol>
       <div class="carousel-inner"><ng-content></ng-content></div>
       ${NAVIGATION[Ng2BootstrapConfig.theme]}
diff --git a/components/carousel/slide.component.ts b/components/carousel/slide.component.ts
index 729ecfaaff..7879e3eefc 100644
--- a/components/carousel/slide.component.ts
+++ b/components/carousel/slide.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit, OnDestroy, Input, HostBinding} from 'angular2/core';
+import {Component, OnInit, OnDestroy, Input, HostBinding} from '@angular/core';
 import {CarouselComponent, Direction} from './carousel.component';
 
 @Component({
diff --git a/components/collapse/collapse.directive.ts b/components/collapse/collapse.directive.ts
index d57e5c4228..119f68c3fd 100644
--- a/components/collapse/collapse.directive.ts
+++ b/components/collapse/collapse.directive.ts
@@ -1,6 +1,6 @@
-import {Directive, OnInit, ElementRef, Input, HostBinding, Renderer} from 'angular2/core';
-import {AnimationBuilder} from 'angular2/src/animate/animation_builder';
-// fix: replace with // 'angular2/animate';
+import {Directive, OnInit, ElementRef, Input, HostBinding, Renderer} from '@angular/core';
+import {AnimationBuilder} from '@angular/platform-browser/src/animate/animation_builder';
+// fix: replace with // '@angular/animate';
 // when https://github.com/angular/angular/issues/5984 will be fixed
 
 // TODO: remove ElementRef
diff --git a/components/common.ts b/components/common.ts
index 660b554f3e..0629118bcc 100644
--- a/components/common.ts
+++ b/components/common.ts
@@ -1,4 +1,4 @@
-import {Directive, TemplateRef, ViewContainerRef, Inject} from 'angular2/core';
+import {Directive, TemplateRef, ViewContainerRef, Inject} from '@angular/core';
 
 export interface KeyAttribute {
   [key:string]:any;
@@ -11,16 +11,16 @@ export interface KeyAttribute {
 export class NgTranscludeDirective {
   public viewRef:ViewContainerRef;
 
-  private _ngTransclude:TemplateRef;
+  private _ngTransclude:TemplateRef<any>;
 
-  private set ngTransclude(templateRef:TemplateRef) {
+  private set ngTransclude(templateRef:TemplateRef<any>) {
     this._ngTransclude = templateRef;
     if (templateRef) {
       this.viewRef.createEmbeddedView(templateRef);
     }
   }
 
-  private get ngTransclude():TemplateRef {
+  private get ngTransclude():TemplateRef<any> {
     return this._ngTransclude;
   }
 
diff --git a/components/datepicker/datepicker-inner.component.ts b/components/datepicker/datepicker-inner.component.ts
index 9cad4cd242..01795778b3 100644
--- a/components/datepicker/datepicker-inner.component.ts
+++ b/components/datepicker/datepicker-inner.component.ts
@@ -1,7 +1,7 @@
-import {Component, OnInit, EventEmitter, Input} from 'angular2/core';
+import {Component, OnInit, EventEmitter, Input} from '@angular/core';
 import {
   CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgModel
-} from 'angular2/common';
+} from '@angular/common';
 import {DateFormatter} from './date-formatter';
 
 const FORMAT_DAY = 'DD';
diff --git a/components/datepicker/datepicker-popup.component.ts b/components/datepicker/datepicker-popup.component.ts
index 059f8d1f56..49948a0e23 100644
--- a/components/datepicker/datepicker-popup.component.ts
+++ b/components/datepicker/datepicker-popup.component.ts
@@ -1,10 +1,10 @@
 import {
   Component, Directive, EventEmitter, ComponentRef, ViewEncapsulation,
   ElementRef, DynamicComponentLoader, Self, Renderer, ReflectiveInjector, provide, ViewContainerRef
-} from 'angular2/core';
+} from '@angular/core';
 import {
   CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgModel, NgStyle
-} from 'angular2/common';
+} from '@angular/common';
 import {KeyAttribute} from '../common';
 import {positionService} from '../position';
 import {DatePickerComponent} from './datepicker.component';
@@ -127,7 +127,7 @@ export class DatePickerPopupDirective {
   private _activeDate:Date;
   private _isOpen:boolean = false;
   private placement:string = 'bottom';
-  private popup:Promise<ComponentRef>;
+  private popup:Promise<ComponentRef<any>>;
 
   public constructor(@Self() cd:NgModel, viewContainerRef:ViewContainerRef,
                      renderer:Renderer, loader:DynamicComponentLoader) {
@@ -166,7 +166,7 @@ export class DatePickerPopupDirective {
 
   public hide(cb:Function):void {
     if (this.popup) {
-      this.popup.then((componentRef:ComponentRef) => {
+      this.popup.then((componentRef:ComponentRef<any>) => {
         componentRef.destroy();
         cb();
         return componentRef;
@@ -187,7 +187,7 @@ export class DatePickerPopupDirective {
 
     this.popup = this.loader
       .loadNextToLocation(PopupContainerComponent, this.viewContainerRef, binding)
-      .then((componentRef:ComponentRef) => {
+      .then((componentRef:ComponentRef<any>) => {
         componentRef.instance.position(this.viewContainerRef);
         componentRef.instance.popupComp = this;
         /*componentRef.instance.update1.observer({
diff --git a/components/datepicker/datepicker.component.ts b/components/datepicker/datepicker.component.ts
index aadabddf73..f7b0470dbd 100644
--- a/components/datepicker/datepicker.component.ts
+++ b/components/datepicker/datepicker.component.ts
@@ -1,5 +1,5 @@
-import {Component, Self, Input} from 'angular2/core';
-import {CORE_DIRECTIVES, FORM_DIRECTIVES, ControlValueAccessor, NgModel} from 'angular2/common';
+import {Component, Self, Input} from '@angular/core';
+import {CORE_DIRECTIVES, FORM_DIRECTIVES, ControlValueAccessor, NgModel} from '@angular/common';
 import {DatePickerInnerComponent} from './datepicker-inner.component';
 import {DayPickerComponent} from './daypicker.component';
 import {MonthPickerComponent} from './monthpicker.component';
diff --git a/components/datepicker/daypicker.component.ts b/components/datepicker/daypicker.component.ts
index 7ae1198964..d7fce35bf2 100644
--- a/components/datepicker/daypicker.component.ts
+++ b/components/datepicker/daypicker.component.ts
@@ -1,5 +1,5 @@
-import {Component, OnInit} from 'angular2/core';
-import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from 'angular2/common';
+import {Component, OnInit} from '@angular/core';
+import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from '@angular/common';
 import {Ng2BootstrapConfig, Ng2BootstrapTheme} from '../ng2-bootstrap-config';
 import {DatePickerInnerComponent} from './datepicker-inner.component';
 
@@ -7,11 +7,11 @@ import {DatePickerInnerComponent} from './datepicker-inner.component';
 const TEMPLATE_OPTIONS:any = {
   [Ng2BootstrapTheme.BS4]: {
     DAY_TITLE: `
-        <th *ngFor="#labelz of labels" class="text-xs-center"><small aria-label="labelz.full"><b>{{labelz.abbr}}</b></small></th>
+        <th *ngFor="let labelz of labels" class="text-xs-center"><small aria-label="labelz.full"><b>{{labelz.abbr}}</b></small></th>
     `,
     WEEK_ROW: `
         <td *ngIf="datePicker.showWeeks" class="text-xs-center h6"><em>{{ weekNumbers[index] }}</em></td>
-        <td *ngFor="#dtz of rowz" class="text-xs-center" role="gridcell" [id]="dtz.uid">
+        <td *ngFor="let dtz of rowz" class="text-xs-center" role="gridcell" [id]="dtz.uid">
           <button type="button" style="min-width:100%;" class="btn btn-sm {{dtz.customClass}}"
                   *ngIf="!(datePicker.onlyCurrentMonth && dtz.secondary)"
                   [ngClass]="{'btn-secondary': !dtz.selected && !datePicker.isActive(dtz), 'btn-info': dtz.selected, disabled: dtz.disabled}"
@@ -26,11 +26,11 @@ const TEMPLATE_OPTIONS:any = {
   },
   [Ng2BootstrapTheme.BS3]: {
     DAY_TITLE: `
-        <th *ngFor="#labelz of labels" class="text-center"><small aria-label="labelz.full"><b>{{labelz.abbr}}</b></small></th>
+        <th *ngFor="let labelz of labels" class="text-center"><small aria-label="labelz.full"><b>{{labelz.abbr}}</b></small></th>
     `,
     WEEK_ROW: `
         <td *ngIf="datePicker.showWeeks" class="text-center h6"><em>{{ weekNumbers[index] }}</em></td>
-        <td *ngFor="#dtz of rowz" class="text-center" role="gridcell" [id]="dtz.uid">
+        <td *ngFor="let dtz of rowz" class="text-center" role="gridcell" [id]="dtz.uid">
           <button type="button" style="min-width:100%;" class="btn btn-default btn-sm {{dtz.customClass}}"
                   *ngIf="!(datePicker.onlyCurrentMonth && dtz.secondary)"
                   [ngClass]="{'btn-info': dtz.selected, active: datePicker.isActive(dtz), disabled: dtz.disabled}"
@@ -83,7 +83,7 @@ const CURRENT_THEME_TEMPLATE:any = TEMPLATE_OPTIONS[Ng2BootstrapConfig.theme ||
     </tr>
   </thead>
   <tbody>
-    <template ngFor [ngForOf]="rows" #rowz="$implicit" #index="index">
+    <template ngFor [ngForOf]="rows" let-rowz="$implicit" let-index="index">
       <tr *ngIf="!(datePicker.onlyCurrentMonth && rowz[0].secondary && rowz[6].secondary)">
         ${CURRENT_THEME_TEMPLATE.WEEK_ROW}
       </tr>
diff --git a/components/datepicker/monthpicker.component.ts b/components/datepicker/monthpicker.component.ts
index 964a17206a..951334ea9a 100644
--- a/components/datepicker/monthpicker.component.ts
+++ b/components/datepicker/monthpicker.component.ts
@@ -1,5 +1,5 @@
-import {Component, OnInit} from 'angular2/core';
-import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from 'angular2/common';
+import {Component, OnInit} from '@angular/core';
+import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from '@angular/common';
 import {DatePickerInnerComponent} from './datepicker-inner.component';
 import {Ng2BootstrapConfig} from '../ng2-bootstrap-config';
 
@@ -54,8 +54,8 @@ const CURRENT_THEME_TEMPLATE:any = TEMPLATE_OPTIONS[Ng2BootstrapConfig.theme] ||
     </tr>
   </thead>
   <tbody>
-    <tr *ngFor="#rowz of rows">
-      <td *ngFor="#dtz of rowz" class="text-center" role="gridcell" id="{{dtz.uid}}" [ngClass]="dtz.customClass">
+    <tr *ngFor="let rowz of rows">
+      <td *ngFor="let dtz of rowz" class="text-center" role="gridcell" id="{{dtz.uid}}" [ngClass]="dtz.customClass">
         ${CURRENT_THEME_TEMPLATE.MONTH_BUTTON}
       </td>
     </tr>
diff --git a/components/datepicker/yearpicker.component.ts b/components/datepicker/yearpicker.component.ts
index 3c852abc01..d19ef79bfd 100644
--- a/components/datepicker/yearpicker.component.ts
+++ b/components/datepicker/yearpicker.component.ts
@@ -1,5 +1,5 @@
-import {Component, OnInit} from 'angular2/core';
-import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from 'angular2/common';
+import {Component, OnInit} from '@angular/core';
+import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from '@angular/common';
 import {Ng2BootstrapConfig} from '../ng2-bootstrap-config';
 import {DatePickerInnerComponent} from './datepicker-inner.component';
 
@@ -59,8 +59,8 @@ const CURRENT_THEME_TEMPLATE:any = TEMPLATE_OPTIONS[Ng2BootstrapConfig.theme] ||
     </tr>
   </thead>
   <tbody>
-    <tr *ngFor="#rowz of rows">
-      <td *ngFor="#dtz of rowz" class="text-center" role="gridcell">
+    <tr *ngFor="let rowz of rows">
+      <td *ngFor="let dtz of rowz" class="text-center" role="gridcell">
       ${CURRENT_THEME_TEMPLATE.YEAR_BUTTON}
       </td>
     </tr>
diff --git a/components/dropdown/dropdown-keyboard-nav.directive.ts b/components/dropdown/dropdown-keyboard-nav.directive.ts
index 999820a285..022ebd6d7d 100644
--- a/components/dropdown/dropdown-keyboard-nav.directive.ts
+++ b/components/dropdown/dropdown-keyboard-nav.directive.ts
@@ -1,4 +1,4 @@
-import {Directive, ElementRef, HostListener} from 'angular2/core';
+import {Directive, ElementRef, HostListener} from '@angular/core';
 import {DropdownDirective} from './dropdown.directive';
 
 @Directive({
diff --git a/components/dropdown/dropdown-menu.directive.ts b/components/dropdown/dropdown-menu.directive.ts
index 80773d770f..a68ec296f6 100644
--- a/components/dropdown/dropdown-menu.directive.ts
+++ b/components/dropdown/dropdown-menu.directive.ts
@@ -1,4 +1,4 @@
-import {Directive, ElementRef, Host, OnInit} from 'angular2/core';
+import {Directive, ElementRef, Host, OnInit} from '@angular/core';
 import {DropdownDirective} from './dropdown.directive';
 
 @Directive({selector: '[dropdownMenu]'})
diff --git a/components/dropdown/dropdown-toggle.directive.ts b/components/dropdown/dropdown-toggle.directive.ts
index ca84cea987..2959090037 100644
--- a/components/dropdown/dropdown-toggle.directive.ts
+++ b/components/dropdown/dropdown-toggle.directive.ts
@@ -1,9 +1,9 @@
 import {
   Directive, ElementRef, Host, OnInit, Input, HostBinding, HostListener
-} from 'angular2/core';
+} from '@angular/core';
 import {DropdownDirective} from './dropdown.directive';
 
-import {global} from 'angular2/src/facade/lang';
+import {global} from '@angular/core/src/facade/lang';
 /* tslint:disable */
 const MouseEvent = (global as any).MouseEvent as MouseEvent;
 /* tslint:enable */
diff --git a/components/dropdown/dropdown.directive.ts b/components/dropdown/dropdown.directive.ts
index d9421d15b4..673516bdef 100644
--- a/components/dropdown/dropdown.directive.ts
+++ b/components/dropdown/dropdown.directive.ts
@@ -1,7 +1,7 @@
 import {
   Directive, OnInit, OnDestroy, Input, Output, HostBinding, EventEmitter,
   ElementRef
-} from 'angular2/core';
+} from '@angular/core';
 import {dropdownService, NONINPUT} from './dropdown.service';
 
 @Directive({selector: '[dropdown]'})
diff --git a/components/dropdown/dropdown.interfaces.ts b/components/dropdown/dropdown.interfaces.ts
index 13d897d9c8..16a48280f7 100644
--- a/components/dropdown/dropdown.interfaces.ts
+++ b/components/dropdown/dropdown.interfaces.ts
@@ -1,4 +1,4 @@
-import {ElementRef} from 'angular2/core';
+import {ElementRef} from '@angular/core';
 
 export interface DropdownMenuInterface {
   el: ElementRef;
diff --git a/components/ng2-bootstrap-config.ts b/components/ng2-bootstrap-config.ts
index 25fd201621..d35aacfdb6 100644
--- a/components/ng2-bootstrap-config.ts
+++ b/components/ng2-bootstrap-config.ts
@@ -1,4 +1,4 @@
-import {global} from 'angular2/src/facade/lang';
+import {global} from '@angular/core/src/facade/lang';
 
 export enum Ng2BootstrapTheme {BS3 = 1, BS4 = 2}
 
diff --git a/components/pagination/pager.component.ts b/components/pagination/pager.component.ts
index ac4a6bfb95..bc15f1cc8e 100644
--- a/components/pagination/pager.component.ts
+++ b/components/pagination/pager.component.ts
@@ -1,5 +1,5 @@
-import {Component, OnInit, ElementRef, Renderer, Self} from 'angular2/core';
-import {NgModel, NgClass} from 'angular2/common';
+import {Component, OnInit, ElementRef, Renderer, Self} from '@angular/core';
+import {NgModel, NgClass} from '@angular/common';
 import {PaginationComponent} from './pagination.component';
 
 const pagerConfig = {
diff --git a/components/pagination/pagination.component.ts b/components/pagination/pagination.component.ts
index 3d6655fa7b..6e15c42a2a 100644
--- a/components/pagination/pagination.component.ts
+++ b/components/pagination/pagination.component.ts
@@ -1,7 +1,7 @@
 import {
   Component, OnInit, Input, Output, ElementRef, EventEmitter, Self, Renderer
-} from 'angular2/core';
-import {NgFor, NgIf, ControlValueAccessor, NgModel} from 'angular2/common';
+} from '@angular/core';
+import {NgFor, NgIf, ControlValueAccessor, NgModel} from '@angular/common';
 import {KeyAttribute} from '../common';
 
 // todo: extract base functionality classes
@@ -51,7 +51,7 @@ const PAGINATION_TEMPLATE = `
       <a class="page-link" href (click)="selectPage(page - 1, $event)" [innerHTML]="getText('previous')"></a>
       </li>
 
-    <li *ngFor="#pg of pages"
+    <li *ngFor="let pg of pages"
         [class.active]="pg.active"
         [class.disabled]="disabled&&!pg.active"
         class="pagination-page page-item">
diff --git a/components/progressbar/bar.component.ts b/components/progressbar/bar.component.ts
index 871f49b7eb..a679250471 100644
--- a/components/progressbar/bar.component.ts
+++ b/components/progressbar/bar.component.ts
@@ -1,5 +1,5 @@
-import {Component, OnInit, OnDestroy, Input, Host} from 'angular2/core';
-import {NgClass, NgStyle} from 'angular2/common';
+import {Component, OnInit, OnDestroy, Input, Host} from '@angular/core';
+import {NgClass, NgStyle} from '@angular/common';
 import {ProgressDirective} from './progress.directive';
 
 // todo: number pipe
diff --git a/components/progressbar/progress.directive.ts b/components/progressbar/progress.directive.ts
index 86ce4a7726..e20959b5bb 100644
--- a/components/progressbar/progress.directive.ts
+++ b/components/progressbar/progress.directive.ts
@@ -1,4 +1,4 @@
-import {Directive, OnInit, Input, HostBinding} from 'angular2/core';
+import {Directive, OnInit, Input, HostBinding} from '@angular/core';
 import {BarComponent} from './bar.component';
 
 const progressConfig = {
diff --git a/components/progressbar/progressbar.component.ts b/components/progressbar/progressbar.component.ts
index 412477d994..e127e88667 100644
--- a/components/progressbar/progressbar.component.ts
+++ b/components/progressbar/progressbar.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input} from 'angular2/core';
+import {Component, Input} from '@angular/core';
 import {ProgressDirective} from './progress.directive';
 import {BarComponent} from './bar.component';
 
diff --git a/components/rating/rating.component.ts b/components/rating/rating.component.ts
index ec3fc67ad9..9b5262797a 100644
--- a/components/rating/rating.component.ts
+++ b/components/rating/rating.component.ts
@@ -1,9 +1,9 @@
 import {
   Component, OnInit, Input, Output, HostListener, Self, EventEmitter
-} from 'angular2/core';
-import {NgFor, ControlValueAccessor, NgModel} from 'angular2/common';
+} from '@angular/core';
+import {NgFor, ControlValueAccessor, NgModel} from '@angular/common';
 
-import {global} from 'angular2/src/facade/lang';
+import {global} from '@angular/core/src/facade/lang';
 /* tslint:disable */
 const KeyboardEvent = (global as any).KeyboardEvent as KeyboardEvent;
 /* tslint:enable */
@@ -15,7 +15,7 @@ const KeyboardEvent = (global as any).KeyboardEvent as KeyboardEvent;
   directives: [NgFor],
   template: `
     <span (mouseleave)="reset()" (keydown)="onKeydown($event)" tabindex="0" role="slider" aria-valuemin="0" [attr.aria-valuemax]="range.length" [attr.aria-valuenow]="value">
-      <template ngFor #r [ngForOf]="range" #index="index">
+      <template ngFor let-r [ngForOf]="range" let-index="index">
         <span class="sr-only">({{ index < value ? '*' : ' ' }})</span>
         <i (mouseenter)="enter(index + 1)" (click)="rate(index + 1)" class="glyphicon" [ngClass]="index < value ? r.stateOn : r.stateOff" [title]="r.title" ></i>
       </template>
diff --git a/components/tabs/tab-heading.directive.ts b/components/tabs/tab-heading.directive.ts
index 663217072a..f400f3a732 100644
--- a/components/tabs/tab-heading.directive.ts
+++ b/components/tabs/tab-heading.directive.ts
@@ -1,10 +1,10 @@
-import {Directive, TemplateRef} from 'angular2/core';
+import {Directive, TemplateRef} from '@angular/core';
 import {TabDirective} from './tab.directive';
 
 @Directive({selector: '[tabHeading]'})
 export class TabHeadingDirective {
-  public templateRef:TemplateRef;
-  public constructor(templateRef:TemplateRef, tab:TabDirective) {
+  public templateRef:TemplateRef<any>;
+  public constructor(templateRef:TemplateRef<any>, tab:TabDirective) {
     tab.headingRef = templateRef;
   }
 }
diff --git a/components/tabs/tab.directive.ts b/components/tabs/tab.directive.ts
index 04689faf78..1d06349b11 100644
--- a/components/tabs/tab.directive.ts
+++ b/components/tabs/tab.directive.ts
@@ -1,6 +1,6 @@
 import {
   Directive, OnDestroy, Input, Output, HostBinding, TemplateRef, EventEmitter
-} from 'angular2/core';
+} from '@angular/core';
 import {TabsetComponent} from './tabset.component';
 
 /* tslint:disable */
@@ -43,7 +43,7 @@ export class TabDirective implements OnDestroy {
 
   @HostBinding('class.tab-pane') public addClass:boolean = true;
 
-  public headingRef:TemplateRef;
+  public headingRef:TemplateRef<any>;
   public tabset:TabsetComponent;
   private _active:boolean;
 
diff --git a/components/tabs/tabset.component.ts b/components/tabs/tabset.component.ts
index 6a1993c957..056671eb14 100644
--- a/components/tabs/tabset.component.ts
+++ b/components/tabs/tabset.component.ts
@@ -1,5 +1,5 @@
-import {Component, OnInit, OnDestroy, HostBinding, Input} from 'angular2/core';
-import {NgClass} from 'angular2/common';
+import {Component, OnInit, OnDestroy, HostBinding, Input} from '@angular/core';
+import {NgClass} from '@angular/common';
 import {NgTranscludeDirective} from '../common';
 import {TabDirective} from './tab.directive';
 // todo: add active event to tab
@@ -9,7 +9,7 @@ import {TabDirective} from './tab.directive';
   directives: [NgClass, NgTranscludeDirective],
   template: `
     <ul class="nav" [ngClass]="classMap" (click)="$event.preventDefault()">
-        <li *ngFor="#tabz of tabs" class="nav-item"
+        <li *ngFor="let tabz of tabs" class="nav-item"
           [class.active]="tabz.active" [class.disabled]="tabz.disabled">
           <a href class="nav-link"
             [class.active]="tabz.active" [class.disabled]="tabz.disabled"
diff --git a/components/timepicker/timepicker.component.ts b/components/timepicker/timepicker.component.ts
index e44903783a..d3e50a4090 100644
--- a/components/timepicker/timepicker.component.ts
+++ b/components/timepicker/timepicker.component.ts
@@ -1,5 +1,5 @@
-import {Component, OnInit, Input, Self} from 'angular2/core';
-import {NgClass, NgModel, ControlValueAccessor} from 'angular2/common';
+import {Component, OnInit, Input, Self} from '@angular/core';
+import {NgClass, NgModel, ControlValueAccessor} from '@angular/common';
 
 export interface TimepickerConfig {
   hourStep:number;
diff --git a/components/tooltip/tooltip-container.component.ts b/components/tooltip/tooltip-container.component.ts
index 480392be2c..a1333bf686 100644
--- a/components/tooltip/tooltip-container.component.ts
+++ b/components/tooltip/tooltip-container.component.ts
@@ -1,7 +1,7 @@
 import {
   Component, ChangeDetectorRef, ElementRef, Inject, AfterViewInit
-} from 'angular2/core';
-import {NgClass, NgStyle} from 'angular2/common';
+} from '@angular/core';
+import {NgClass, NgStyle} from '@angular/common';
 import {positionService} from '../position';
 import {TooltipOptions} from './tooltip-options.class';
 
diff --git a/components/tooltip/tooltip-options.class.ts b/components/tooltip/tooltip-options.class.ts
index 760e655f47..cc6dc5e346 100644
--- a/components/tooltip/tooltip-options.class.ts
+++ b/components/tooltip/tooltip-options.class.ts
@@ -1,4 +1,4 @@
-import {Injectable} from 'angular2/core';
+import {Injectable} from '@angular/core';
 
 @Injectable()
 export class TooltipOptions {
diff --git a/components/tooltip/tooltip.directive.ts b/components/tooltip/tooltip.directive.ts
index ae25eb7c5d..b0905fba27 100644
--- a/components/tooltip/tooltip.directive.ts
+++ b/components/tooltip/tooltip.directive.ts
@@ -1,7 +1,7 @@
 import {
   Directive, Input, HostListener, DynamicComponentLoader,
   ComponentRef, Provider, ReflectiveInjector, ViewContainerRef
-} from 'angular2/core';
+} from '@angular/core';
 import {TooltipOptions} from './tooltip-options.class';
 import {TooltipContainerComponent} from './tooltip-container.component';
 
@@ -20,7 +20,7 @@ export class TooltipDirective {
   public loader:DynamicComponentLoader;
 
   private visible:boolean = false;
-  private tooltip:Promise<ComponentRef>;
+  private tooltip:Promise<ComponentRef<any>>;
 
   public constructor(viewContainerRef:ViewContainerRef, loader:DynamicComponentLoader) {
     this.viewContainerRef = viewContainerRef;
@@ -49,7 +49,7 @@ export class TooltipDirective {
 
     this.tooltip = this.loader
       .loadNextToLocation(TooltipContainerComponent, this.viewContainerRef, binding)
-      .then((componentRef:ComponentRef) => {
+      .then((componentRef:ComponentRef<any>) => {
         return componentRef;
       });
   }
@@ -62,7 +62,7 @@ export class TooltipDirective {
       return;
     }
     this.visible = false;
-    this.tooltip.then((componentRef:ComponentRef) => {
+    this.tooltip.then((componentRef:ComponentRef<any>) => {
       componentRef.destroy();
       return componentRef;
     });
diff --git a/components/typeahead/typeahead-container.component.ts b/components/typeahead/typeahead-container.component.ts
index 87d5694935..9bcce79598 100644
--- a/components/typeahead/typeahead-container.component.ts
+++ b/components/typeahead/typeahead-container.component.ts
@@ -1,5 +1,5 @@
-import {Component, ElementRef, ViewEncapsulation} from 'angular2/core';
-import {CORE_DIRECTIVES} from 'angular2/common';
+import {Component, ElementRef, ViewEncapsulation} from '@angular/core';
+import {CORE_DIRECTIVES} from '@angular/common';
 import {TypeaheadUtils} from './typeahead-utils';
 import {TypeaheadDirective} from './typeahead.directive';
 import {TypeaheadOptions} from './typeahead-options.class';
@@ -12,7 +12,7 @@ const TEMPLATE:any = {
       [ngStyle]="{top: top, left: left, display: display}"
       (mouseleave)="focusLost()">
       <a href="#"
-         *ngFor="#match of matches"
+         *ngFor="let match of matches"
          class="dropdown-item"
          (click)="selectMatch(match, $event)"
          (mouseenter)="selectActive(match)"
@@ -25,7 +25,7 @@ const TEMPLATE:any = {
       style="display: block"
       [ngStyle]="{top: top, left: left, display: display}"
       (mouseleave)="focusLost()">
-    <li *ngFor="#match of matches"
+    <li *ngFor="let match of matches"
         [class.active]="isActive(match)"
         (mouseenter)="selectActive(match)">
         <a href="#" (click)="selectMatch(match, $event)" tabindex="-1" [innerHtml]="hightlight(match, query)"></a>
diff --git a/components/typeahead/typeahead.directive.ts b/components/typeahead/typeahead.directive.ts
index e9e43f7c85..4165bcad41 100644
--- a/components/typeahead/typeahead.directive.ts
+++ b/components/typeahead/typeahead.directive.ts
@@ -1,18 +1,18 @@
 import {
   Directive, Input, Output, HostListener, EventEmitter, OnInit, ElementRef,
   Renderer, DynamicComponentLoader, ComponentRef, ReflectiveInjector, provide, ViewContainerRef
-} from 'angular2/core';
-import {NgModel} from 'angular2/common';
+} from '@angular/core';
+import {NgModel} from '@angular/common';
 import {TypeaheadUtils} from './typeahead-utils';
 import {TypeaheadContainerComponent} from './typeahead-container.component';
 import {TypeaheadOptions} from './typeahead-options.class';
 
-import {global} from 'angular2/src/facade/lang';
+import {global} from '@angular/core/src/facade/lang';
 /* tslint:disable */
 const KeyboardEvent = (global as any).KeyboardEvent as KeyboardEvent;
 /* tslint:enable */
 
-// https://github.com/angular/angular/blob/master/modules/angular2/src/core/forms/directives/shared.ts
+// https://github.com/angular/angular/blob/master/modules/@angular/src/core/forms/directives/shared.ts
 function setProperty(renderer:Renderer, elementRef:ElementRef, propName:string, propValue:any):void {
   renderer.setElementProperty(elementRef.nativeElement, propName, propValue);
 }
@@ -51,7 +51,7 @@ export class TypeaheadDirective implements OnInit {
   private debouncer:Function;
   private _matches:Array<any> = [];
   private placement:string = 'bottom-left';
-  private popup:Promise<ComponentRef>;
+  private popup:Promise<ComponentRef<any>>;
 
   private cd:NgModel;
   private viewContainerRef:ViewContainerRef;
@@ -220,7 +220,7 @@ export class TypeaheadDirective implements OnInit {
 
     this.popup = this.loader
       .loadNextToLocation(TypeaheadContainerComponent, this.viewContainerRef, binding)
-      .then((componentRef:ComponentRef) => {
+      .then((componentRef:ComponentRef<any>) => {
         componentRef.instance.position(this.viewContainerRef.element);
         this.container = componentRef.instance;
         this.container.parent = this;
@@ -241,7 +241,7 @@ export class TypeaheadDirective implements OnInit {
 
   public hide():void {
     if (this.container) {
-      this.popup.then((componentRef:ComponentRef) => {
+      this.popup.then((componentRef:ComponentRef<any>) => {
         componentRef.destroy();
         this.container = void 0;
         return componentRef;
diff --git a/demo/components/accordion-section.ts b/demo/components/accordion-section.ts
index 7c6a50777f..a8ae43edc1 100644
--- a/demo/components/accordion-section.ts
+++ b/demo/components/accordion-section.ts
@@ -1,5 +1,5 @@
-import {Component} from 'angular2/core';
-import {CORE_DIRECTIVES} from 'angular2/common';
+import {Component} from '@angular/core';
+import {CORE_DIRECTIVES} from '@angular/common';
 
 import {TAB_DIRECTIVES} from '../../ng2-bootstrap';
 import {AccordionDemoComponent} from './accordion/accordion-demo';
diff --git a/demo/components/accordion/accordion-demo.html b/demo/components/accordion/accordion-demo.html
index 0e6428ea4b..b4834dcbf6 100644
--- a/demo/components/accordion/accordion-demo.html
+++ b/demo/components/accordion/accordion-demo.html
@@ -20,15 +20,15 @@
                    [isDisabled]="status.isFirstDisabled">
     This content is straight in the template.
   </accordion-group>
-  <accordion-group *ngFor="#group of groups" [heading]="group.title">
+  <accordion-group *ngFor="let group of groups" [heading]="group.title">
      {{ group?.content }}
   </accordion-group>
   <accordion-group heading="Dynamic Body Content">
     <p>The body of the accordion group grows to fit the contents</p>
     <button type="button" class="btn btn-primary btn-sm" (click)="addItem()">Add Item</button>
-    <div *ngFor="#item of items">{{item}}</div>
+    <div *ngFor="let item of items">{{item}}</div>
   </accordion-group>
-  <accordion-group #group [isOpen]="status.open">
+  <accordion-group let group [isOpen]="status.open">
     <div accordion-heading>
       I can have markup, too!
       <i class="pull-right glyphicon"
diff --git a/demo/components/accordion/accordion-demo.ts b/demo/components/accordion/accordion-demo.ts
index 07621ec7b2..bce7f98e10 100644
--- a/demo/components/accordion/accordion-demo.ts
+++ b/demo/components/accordion/accordion-demo.ts
@@ -1,5 +1,5 @@
-import { Component } from 'angular2/core';
-import { CORE_DIRECTIVES, FORM_DIRECTIVES } from 'angular2/common';
+import { Component } from '@angular/core';
+import { CORE_DIRECTIVES, FORM_DIRECTIVES } from '@angular/common';
 
 import { ACCORDION_DIRECTIVES } from '../../../ng2-bootstrap';
 
diff --git a/demo/components/alert-section.ts b/demo/components/alert-section.ts
index 8196fb733e..77788c4e4b 100644
--- a/demo/components/alert-section.ts
+++ b/demo/components/alert-section.ts
@@ -1,5 +1,5 @@
-import {Component} from 'angular2/core';
-import {CORE_DIRECTIVES} from 'angular2/common';
+import {Component} from '@angular/core';
+import {CORE_DIRECTIVES} from '@angular/common';
 
 import {TAB_DIRECTIVES} from '../../ng2-bootstrap';
 import {AlertDemoComponent} from './alert/alert-demo';
diff --git a/demo/components/alert/alert-demo.html b/demo/components/alert/alert-demo.html
index e1d57bb6a3..cfd14d38ad 100644
--- a/demo/components/alert/alert-demo.html
+++ b/demo/components/alert/alert-demo.html
@@ -1,4 +1,4 @@
-<alert *ngFor="#alert of alerts;#i = index" [type]="alert.type" dismissible="true" (close)="closeAlert(i)">
+<alert *ngFor="let alert of alerts;let i = index" [type]="alert.type" dismissible="true" (close)="closeAlert(i)">
   {{ alert?.msg }}
 </alert>
 
diff --git a/demo/components/alert/alert-demo.ts b/demo/components/alert/alert-demo.ts
index 90a2136cbe..b6f6f86b3b 100644
--- a/demo/components/alert/alert-demo.ts
+++ b/demo/components/alert/alert-demo.ts
@@ -1,5 +1,5 @@
-import {Component} from 'angular2/core';
-import {CORE_DIRECTIVES} from 'angular2/common';
+import {Component} from '@angular/core';
+import {CORE_DIRECTIVES} from '@angular/common';
 import {AlertComponent} from '../../../ng2-bootstrap';
 
 // webpack html imports
diff --git a/demo/components/buttons-section.ts b/demo/components/buttons-section.ts
index eb0572f92a..b19c9e2a92 100644
--- a/demo/components/buttons-section.ts
+++ b/demo/components/buttons-section.ts
@@ -1,5 +1,5 @@
-import {Component} from 'angular2/core';
-import {CORE_DIRECTIVES} from 'angular2/common';
+import {Component} from '@angular/core';
+import {CORE_DIRECTIVES} from '@angular/common';
 
 import {TAB_DIRECTIVES} from '../../ng2-bootstrap';
 import {ButtonsDemoComponent} from './buttons/buttons-demo';
diff --git a/demo/components/buttons/buttons-demo.ts b/demo/components/buttons/buttons-demo.ts
index be4345dcfb..ee64b41900 100644
--- a/demo/components/buttons/buttons-demo.ts
+++ b/demo/components/buttons/buttons-demo.ts
@@ -1,5 +1,5 @@
-import {Component} from 'angular2/core';
-import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/common';
+import {Component} from '@angular/core';
+import {CORE_DIRECTIVES, FORM_DIRECTIVES} from '@angular/common';
 import {BUTTON_DIRECTIVES} from '../../../ng2-bootstrap';
 
 // webpack html imports
diff --git a/demo/components/carousel-section.ts b/demo/components/carousel-section.ts
index f9b5ea2817..8604b4b280 100644
--- a/demo/components/carousel-section.ts
+++ b/demo/components/carousel-section.ts
@@ -1,5 +1,5 @@
-import {Component} from 'angular2/core';
-import {CORE_DIRECTIVES} from 'angular2/common';
+import {Component} from '@angular/core';
+import {CORE_DIRECTIVES} from '@angular/common';
 
 import {TAB_DIRECTIVES} from '../../ng2-bootstrap';
 import {CarouselDemoComponent} from './carousel/carousel-demo';
diff --git a/demo/components/carousel/carousel-demo.html b/demo/components/carousel/carousel-demo.html
index bd0e5476b3..586dc14eca 100644
--- a/demo/components/carousel/carousel-demo.html
+++ b/demo/components/carousel/carousel-demo.html
@@ -1,7 +1,7 @@
 <div class="row">
   <div class="col-md-6">
     <carousel [interval]="myInterval" [noWrap]="noWrapSlides">
-      <slide *ngFor="#slidez of slides; #index=index"
+      <slide *ngFor="let slidez of slides; let index=index"
              [active]="slidez.active">
         <img [src]="slidez.image" style="margin:auto;">
 
diff --git a/demo/components/carousel/carousel-demo.ts b/demo/components/carousel/carousel-demo.ts
index 6be92d20c7..2af93c6014 100644
--- a/demo/components/carousel/carousel-demo.ts
+++ b/demo/components/carousel/carousel-demo.ts
@@ -1,5 +1,5 @@
-import {Component} from 'angular2/core';
-import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/common';
+import {Component} from '@angular/core';
+import {CORE_DIRECTIVES, FORM_DIRECTIVES} from '@angular/common';
 import {CAROUSEL_DIRECTIVES} from '../../../ng2-bootstrap';
 
 // webpack html imports
diff --git a/demo/components/collapse-section.ts b/demo/components/collapse-section.ts
index b1d8b40853..571ae8f761 100644
--- a/demo/components/collapse-section.ts
+++ b/demo/components/collapse-section.ts
@@ -1,5 +1,5 @@
-import {Component} from 'angular2/core';
-import {CORE_DIRECTIVES} from 'angular2/common';
+import {Component} from '@angular/core';
+import {CORE_DIRECTIVES} from '@angular/common';
 
 import {TAB_DIRECTIVES} from '../../ng2-bootstrap';
 import {CollapseDemoComponent} from './collapse/collapse-demo';
diff --git a/demo/components/collapse/collapse-demo.ts b/demo/components/collapse/collapse-demo.ts
index 3071884511..dc9a12af24 100644
--- a/demo/components/collapse/collapse-demo.ts
+++ b/demo/components/collapse/collapse-demo.ts
@@ -1,4 +1,4 @@
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 import {CollapseDirective} from '../../../ng2-bootstrap';
 
 // webpack html imports
diff --git a/demo/components/datepicker-section.ts b/demo/components/datepicker-section.ts
index 517ba380df..7037692c15 100644
--- a/demo/components/datepicker-section.ts
+++ b/demo/components/datepicker-section.ts
@@ -1,5 +1,5 @@
-import {Component} from 'angular2/core';
-import {CORE_DIRECTIVES} from 'angular2/common';
+import {Component} from '@angular/core';
+import {CORE_DIRECTIVES} from '@angular/common';
 
 import {TAB_DIRECTIVES} from '../../ng2-bootstrap';
 import {DatepickerDemoComponent} from './datepicker/datepicker-demo';
diff --git a/demo/components/datepicker/datepicker-demo.ts b/demo/components/datepicker/datepicker-demo.ts
index 8be50c6d6d..3a8d3f7e48 100644
--- a/demo/components/datepicker/datepicker-demo.ts
+++ b/demo/components/datepicker/datepicker-demo.ts
@@ -1,5 +1,5 @@
-import {Component} from 'angular2/core';
-import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/common';
+import {Component} from '@angular/core';
+import {CORE_DIRECTIVES, FORM_DIRECTIVES} from '@angular/common';
 
 import * as moment from 'moment';
 import {DATEPICKER_DIRECTIVES} from '../../../ng2-bootstrap';
diff --git a/demo/components/demo-header.ts b/demo/components/demo-header.ts
index fbb3c953b1..2dd7aa09a3 100644
--- a/demo/components/demo-header.ts
+++ b/demo/components/demo-header.ts
@@ -1,5 +1,5 @@
-import {Component} from 'angular2/core';
-import {CORE_DIRECTIVES} from 'angular2/common';
+import {Component} from '@angular/core';
+import {CORE_DIRECTIVES} from '@angular/common';
 import {
   CollapseDirective, DROPDOWN_DIRECTIVES, Ng2BootstrapConfig, Ng2BootstrapTheme
 } from '../../ng2-bootstrap';
@@ -28,7 +28,7 @@ let template = `
           <li class="nav-item dropdown" dropdown>
             <a role="button" class="nav-link dropdownToggle" dropdownToggle>Directives <b class="caret"></b></a>
             <ul class="dropdown-menu">
-              <li *ngFor="#comp of components"><a class="dropdown-item" href="{{prefix}}#{{comp.toLowerCase()}}">{{comp}}</a></li>
+              <li *ngFor="let comp of components"><a class="dropdown-item" href="{{prefix}}#{{comp.toLowerCase()}}">{{comp}}</a></li>
             </ul>
           </li>
           <li class="nav-item"><a class="nav-link" href="{{prefix}}#getting-started">Getting started</a></li>
@@ -39,7 +39,7 @@ let template = `
         <ul class="nav nav-pills nav-stacked scrollable-menu" [collapse]="isCollapsed" (click)="isCollapsed = !isCollapsed; true">
           <li class="nav-item"><a class="nav-link" href="{{prefix}}#getting-started">Getting started</a></li>
           <li class="nav-item"><a class="nav-link" href="{{prefix}}#migration">Migration</a></li>
-          <li *ngFor="#comp of components" class="nav-item"><a class="dropdown-item nav-link" href="{{prefix}}#{{comp.toLowerCase()}}">{{comp}}</a></li>
+          <li *ngFor="let comp of components" class="nav-item"><a class="dropdown-item nav-link" href="{{prefix}}#{{comp.toLowerCase()}}">{{comp}}</a></li>
         </ul>
       </nav>
     </div>
diff --git a/demo/components/demo-section.ts b/demo/components/demo-section.ts
index 29357a98d5..e45f248cdb 100644
--- a/demo/components/demo-section.ts
+++ b/demo/components/demo-section.ts
@@ -1,5 +1,5 @@
-import {Component} from 'angular2/core';
-import {CORE_DIRECTIVES} from 'angular2/common';
+import {Component} from '@angular/core';
+import {CORE_DIRECTIVES} from '@angular/common';
 import {TAB_DIRECTIVES} from '../../ng2-bootstrap';
 
 let name = 'Alerts';
diff --git a/demo/components/dropdown-section.ts b/demo/components/dropdown-section.ts
index 8d9fea6a4d..97a9c8d6d3 100644
--- a/demo/components/dropdown-section.ts
+++ b/demo/components/dropdown-section.ts
@@ -1,5 +1,5 @@
-import {Component} from 'angular2/core';
-import {CORE_DIRECTIVES} from 'angular2/common';
+import {Component} from '@angular/core';
+import {CORE_DIRECTIVES} from '@angular/common';
 
 import {TAB_DIRECTIVES} from '../../ng2-bootstrap';
 import {DropdownDemoComponent} from './dropdown/dropdown-demo';
diff --git a/demo/components/dropdown/dropdown-demo.html b/demo/components/dropdown/dropdown-demo.html
index ecdbd55b45..aa487ca7a5 100644
--- a/demo/components/dropdown/dropdown-demo.html
+++ b/demo/components/dropdown/dropdown-demo.html
@@ -5,7 +5,7 @@
       Click me for a dropdown, yo!
     </a>
     <ul class="dropdown-menu" aria-labelledby="simple-dropdown">
-      <li *ngFor="#choice of items">
+      <li *ngFor="let choice of items">
         <a class="dropdown-item" href="#">{{choice}}</a>
       </li>
     </ul>
diff --git a/demo/components/dropdown/dropdown-demo.ts b/demo/components/dropdown/dropdown-demo.ts
index 1cde57764c..cf458ead65 100644
--- a/demo/components/dropdown/dropdown-demo.ts
+++ b/demo/components/dropdown/dropdown-demo.ts
@@ -1,5 +1,5 @@
-import {Component} from 'angular2/core';
-import {CORE_DIRECTIVES} from 'angular2/common';
+import {Component} from '@angular/core';
+import {CORE_DIRECTIVES} from '@angular/common';
 import {DROPDOWN_DIRECTIVES} from '../../../ng2-bootstrap';
 
 // webpack html imports
diff --git a/demo/components/pagination-section.ts b/demo/components/pagination-section.ts
index 49016b6497..9a2d5e2d5e 100644
--- a/demo/components/pagination-section.ts
+++ b/demo/components/pagination-section.ts
@@ -1,5 +1,5 @@
-import {Component} from 'angular2/core';
-import {CORE_DIRECTIVES} from 'angular2/common';
+import {Component} from '@angular/core';
+import {CORE_DIRECTIVES} from '@angular/common';
 
 import {TAB_DIRECTIVES} from '../../ng2-bootstrap';
 import {PaginationDemoComponent} from './pagination/pagination-demo';
diff --git a/demo/components/pagination/pagination-demo.ts b/demo/components/pagination/pagination-demo.ts
index 57accca6cc..d269b50c7b 100644
--- a/demo/components/pagination/pagination-demo.ts
+++ b/demo/components/pagination/pagination-demo.ts
@@ -1,5 +1,5 @@
-import {Component} from 'angular2/core';
-import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/common';
+import {Component} from '@angular/core';
+import {CORE_DIRECTIVES, FORM_DIRECTIVES} from '@angular/common';
 import {PAGINATION_DIRECTIVES} from '../../../ng2-bootstrap';
 
 // webpack html imports
diff --git a/demo/components/progressbar-section.ts b/demo/components/progressbar-section.ts
index e885ffdc75..42a7a7da0b 100644
--- a/demo/components/progressbar-section.ts
+++ b/demo/components/progressbar-section.ts
@@ -1,5 +1,5 @@
-import {Component} from 'angular2/core';
-import {CORE_DIRECTIVES} from 'angular2/common';
+import {Component} from '@angular/core';
+import {CORE_DIRECTIVES} from '@angular/common';
 
 import {
   TAB_DIRECTIVES,
diff --git a/demo/components/progressbar/progressbar-demo-bs4.html b/demo/components/progressbar/progressbar-demo-bs4.html
index c36d6c07ac..dfd3221086 100644
--- a/demo/components/progressbar/progressbar-demo-bs4.html
+++ b/demo/components/progressbar/progressbar-demo-bs4.html
@@ -29,7 +29,7 @@ <h3>Dynamic <button type="button" class="btn btn-sm btn-primary" (click)="random
 <h3>Stacked <button type="button" class="btn btn-sm btn-primary" (click)="randomStacked()">Randomize</button></h3>
 <div class="row col-lg-12">
   <!-- todo: implement as component -->
-  <progress *ngFor="#baz of stacked"
+  <progress *ngFor="let baz of stacked"
             class="progress progress-{{ baz?.type }}"
             style="float: left;"
             [ngStyle]="{width: baz.value + '%'}"
diff --git a/demo/components/progressbar/progressbar-demo.html b/demo/components/progressbar/progressbar-demo.html
index bec98bc377..8f912567b9 100644
--- a/demo/components/progressbar/progressbar-demo.html
+++ b/demo/components/progressbar/progressbar-demo.html
@@ -30,7 +30,7 @@ <h3>Stacked
   <button type="button" class="btn btn-sm btn-primary" (click)="randomStacked()">Randomize</button>
 </h3>
 <bs-progress>
-  <bar *ngFor="#baz of stacked" [value]="baz.value" [type]="baz?.type">
+  <bar *ngFor="let baz of stacked" [value]="baz.value" [type]="baz?.type">
     <span *ngIf="baz.value > 5">{{baz?.value}}%</span>
   </bar>
 </bs-progress>
diff --git a/demo/components/progressbar/progressbar-demo.ts b/demo/components/progressbar/progressbar-demo.ts
index 678919affc..0cecd60a57 100644
--- a/demo/components/progressbar/progressbar-demo.ts
+++ b/demo/components/progressbar/progressbar-demo.ts
@@ -1,5 +1,5 @@
-import {Component} from 'angular2/core';
-import {CORE_DIRECTIVES} from 'angular2/common';
+import {Component} from '@angular/core';
+import {CORE_DIRECTIVES} from '@angular/common';
 import {
   Ng2BootstrapConfig, Ng2BootstrapTheme, PROGRESSBAR_DIRECTIVES
 } from '../../../ng2-bootstrap';
diff --git a/demo/components/rating-section.ts b/demo/components/rating-section.ts
index 93a024a9bd..4ba1bb89bf 100644
--- a/demo/components/rating-section.ts
+++ b/demo/components/rating-section.ts
@@ -1,5 +1,5 @@
-import {Component} from 'angular2/core';
-import {CORE_DIRECTIVES} from 'angular2/common';
+import {Component} from '@angular/core';
+import {CORE_DIRECTIVES} from '@angular/common';
 
 import {TAB_DIRECTIVES} from '../../ng2-bootstrap';
 import {RatingDemoComponent} from './rating/rating-demo';
diff --git a/demo/components/rating/rating-demo.ts b/demo/components/rating/rating-demo.ts
index 543544ab74..37e642cbb5 100644
--- a/demo/components/rating/rating-demo.ts
+++ b/demo/components/rating/rating-demo.ts
@@ -1,5 +1,5 @@
-import {Component} from 'angular2/core';
-import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/common';
+import {Component} from '@angular/core';
+import {CORE_DIRECTIVES, FORM_DIRECTIVES} from '@angular/common';
 import {RatingComponent} from '../../../ng2-bootstrap';
 
 // webpack html imports
diff --git a/demo/components/tabs-section.ts b/demo/components/tabs-section.ts
index 4b37610301..36880a28c6 100644
--- a/demo/components/tabs-section.ts
+++ b/demo/components/tabs-section.ts
@@ -1,5 +1,5 @@
-import {Component} from 'angular2/core';
-import {CORE_DIRECTIVES} from 'angular2/common';
+import {Component} from '@angular/core';
+import {CORE_DIRECTIVES} from '@angular/common';
 
 import {TAB_DIRECTIVES} from '../../ng2-bootstrap';
 import {TabsDemoComponent} from './tabs/tabs-demo';
diff --git a/demo/components/tabs/tabs-demo.html b/demo/components/tabs/tabs-demo.html
index ce65821c81..de79c0c3d4 100644
--- a/demo/components/tabs/tabs-demo.html
+++ b/demo/components/tabs/tabs-demo.html
@@ -10,7 +10,7 @@
   <hr />
   <tabset>
     <tab heading="Static title">Static content</tab>
-    <tab *ngFor="#tabz of tabs"
+    <tab *ngFor="let tabz of tabs"
          [heading]="tabz.title"
          [active]="tabz.active"
          (select)="tabz.active = true"
diff --git a/demo/components/tabs/tabs-demo.ts b/demo/components/tabs/tabs-demo.ts
index b347d80399..5cfc0a7162 100644
--- a/demo/components/tabs/tabs-demo.ts
+++ b/demo/components/tabs/tabs-demo.ts
@@ -1,5 +1,5 @@
-import {Component, ChangeDetectionStrategy} from 'angular2/core';
-import {CORE_DIRECTIVES} from 'angular2/common';
+import {Component, ChangeDetectionStrategy} from '@angular/core';
+import {CORE_DIRECTIVES} from '@angular/common';
 import {TAB_DIRECTIVES} from '../../../ng2-bootstrap';
 
 // webpack html imports
diff --git a/demo/components/timepicker-section.ts b/demo/components/timepicker-section.ts
index e170950277..b70f2ca86a 100644
--- a/demo/components/timepicker-section.ts
+++ b/demo/components/timepicker-section.ts
@@ -1,5 +1,5 @@
-import {Component} from 'angular2/core';
-import {CORE_DIRECTIVES} from 'angular2/common';
+import {Component} from '@angular/core';
+import {CORE_DIRECTIVES} from '@angular/common';
 
 import {TAB_DIRECTIVES} from '../../ng2-bootstrap';
 import {TimepickerDemoComponent} from './timepicker/timepicker-demo';
diff --git a/demo/components/timepicker/timepicker-demo.html b/demo/components/timepicker/timepicker-demo.html
index 24dd1d4cef..0063411c36 100644
--- a/demo/components/timepicker/timepicker-demo.html
+++ b/demo/components/timepicker/timepicker-demo.html
@@ -6,13 +6,13 @@
   <div class="col-xs-6">
     Hours step is:
     <select class="form-control" [(ngModel)]="hstep">
-      <option *ngFor="#opt of options.hstep" [value]="opt">{{opt}}</option>
+      <option *ngFor="let opt of options.hstep" [value]="opt">{{opt}}</option>
     </select>
   </div>
   <div class="col-xs-6">
     Minutes step is:
     <select class="form-control" [(ngModel)]="mstep">
-      <option *ngFor="#opt of options.mstep" [value]="opt">{{opt}}</option>
+      <option *ngFor="let opt of options.mstep" [value]="opt">{{opt}}</option>
     </select>
   </div>
 </div>
diff --git a/demo/components/timepicker/timepicker-demo.ts b/demo/components/timepicker/timepicker-demo.ts
index 027285dbdf..9d15338e71 100644
--- a/demo/components/timepicker/timepicker-demo.ts
+++ b/demo/components/timepicker/timepicker-demo.ts
@@ -1,5 +1,5 @@
-import {Component} from 'angular2/core';
-import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/common';
+import {Component} from '@angular/core';
+import {CORE_DIRECTIVES, FORM_DIRECTIVES} from '@angular/common';
 import {TimepickerComponent} from '../../../ng2-bootstrap';
 
 // webpack html imports
diff --git a/demo/components/tooltip-section.ts b/demo/components/tooltip-section.ts
index 9c96ea4d90..1f43fefab3 100644
--- a/demo/components/tooltip-section.ts
+++ b/demo/components/tooltip-section.ts
@@ -1,5 +1,5 @@
-import {Component} from 'angular2/core';
-import {CORE_DIRECTIVES} from 'angular2/common';
+import {Component} from '@angular/core';
+import {CORE_DIRECTIVES} from '@angular/common';
 
 import {TAB_DIRECTIVES} from '../../ng2-bootstrap';
 import {TooltipDemoComponent} from './tooltip/tooltip-demo';
diff --git a/demo/components/tooltip/tooltip-demo.ts b/demo/components/tooltip/tooltip-demo.ts
index b8ddc6c64d..f8148c04b8 100644
--- a/demo/components/tooltip/tooltip-demo.ts
+++ b/demo/components/tooltip/tooltip-demo.ts
@@ -1,5 +1,5 @@
-import {Component, ChangeDetectionStrategy} from 'angular2/core';
-import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/common';
+import {Component, ChangeDetectionStrategy} from '@angular/core';
+import {CORE_DIRECTIVES, FORM_DIRECTIVES} from '@angular/common';
 import {TOOLTIP_DIRECTIVES} from '../../../ng2-bootstrap';
 
 // webpack html imports
diff --git a/demo/components/typeahead-section.ts b/demo/components/typeahead-section.ts
index 4d5072c682..6c5effe950 100644
--- a/demo/components/typeahead-section.ts
+++ b/demo/components/typeahead-section.ts
@@ -1,5 +1,5 @@
-import {Component} from 'angular2/core';
-import {CORE_DIRECTIVES} from 'angular2/common';
+import {Component} from '@angular/core';
+import {CORE_DIRECTIVES} from '@angular/common';
 
 import {TAB_DIRECTIVES} from '../../ng2-bootstrap';
 import {TypeaheadDemoComponent} from './typeahead/typeahead-demo';
diff --git a/demo/components/typeahead/typeahead-demo.ts b/demo/components/typeahead/typeahead-demo.ts
index fe6d0a1c9f..03ef0ea680 100644
--- a/demo/components/typeahead/typeahead-demo.ts
+++ b/demo/components/typeahead/typeahead-demo.ts
@@ -1,5 +1,5 @@
-import {Component} from 'angular2/core';
-import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/common';
+import {Component} from '@angular/core';
+import {CORE_DIRECTIVES, FORM_DIRECTIVES} from '@angular/common';
 import {TYPEAHEAD_DIRECTIVES} from '../../../ng2-bootstrap';
 
 // webpack html imports
diff --git a/demo/index.ts b/demo/index.ts
index 7795f98a32..35c960fb25 100644
--- a/demo/index.ts
+++ b/demo/index.ts
@@ -1,6 +1,6 @@
-import {Component, enableProdMode} from 'angular2/core';
-import {CORE_DIRECTIVES} from 'angular2/common';
-import {bootstrap} from 'angular2/platform/browser';
+import {Component, enableProdMode} from '@angular/core';
+import {CORE_DIRECTIVES} from '@angular/common';
+import {bootstrap} from '@angular/platform-browser-dynamic';
 import {Ng2BootstrapConfig, Ng2BootstrapTheme} from '../ng2-bootstrap';
 import {AccordionSectionComponent} from './components/accordion-section';
 import {AlertSectionComponent} from './components/alert-section';
diff --git a/package.json b/package.json
index 7a9f061931..1474313194 100644
--- a/package.json
+++ b/package.json
@@ -50,10 +50,18 @@
     "moment": "2.13.0"
   },
   "peerDependencies": {
-    "angular2": "2.0.0-beta.16"
+    "@angular/common": "^2.0.0-rc.1",
+    "@angular/compiler": "^2.0.0-rc.1",
+    "@angular/core": "^2.0.0-rc.1",
+    "@angular/platform-browser": "^2.0.0-rc.1",
+    "@angular/platform-browser-dynamic": "^2.0.0-rc.1"
   },
   "devDependencies": {
-    "angular2": "2.0.0-beta.16",
+    "@angular/common": "^2.0.0-rc.1",
+    "@angular/compiler": "^2.0.0-rc.1",
+    "@angular/core": "^2.0.0-rc.1",
+    "@angular/platform-browser": "^2.0.0-rc.1",
+    "@angular/platform-browser-dynamic": "^2.0.0-rc.1",
     "async": "1.5.2",
     "balanced-match": "0.4.0",
     "bootstrap": "3.3.6",
diff --git a/test.bundle.js b/test.bundle.js
index 11332639cc..9ade85794b 100644
--- a/test.bundle.js
+++ b/test.bundle.js
@@ -23,12 +23,12 @@ require('zone.js/dist/long-stack-trace-zone.js');
 require('zone.js/dist/jasmine-patch.js');
 require('zone.js/dist/async-test.js');
 
-var testing = require('angular2/testing');
-var browser = require('angular2/platform/testing/browser');
+var testing = require('@angular/core/testing');
+var browser = require('@angular/platform-browser-dynamic/testing');
 
 testing.setBaseTestProviders(
-  browser.TEST_BROWSER_PLATFORM_PROVIDERS,
-  browser.TEST_BROWSER_APPLICATION_PROVIDERS);
+  browser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
+  browser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
 
 /*
  Ok, this is kinda crazy. We can use the the context method on
diff --git a/webpack.config.js b/webpack.config.js
index 7a51881e72..d6cb6594d5 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -52,8 +52,8 @@ const config = {
       'es6-promise',
       'zone.js',
       'reflect-metadata',
-      'angular2/common',
-      'angular2/core'
+      '@angular/common',
+      '@angular/core'
     ],
     'angular2-bootstrap': ['ng2-bootstrap'],
     'angular2-bootstrap-demo': 'demo'