diff --git a/addons/centered/README.md b/addons/centered/README.md
index cb18559790d7..6bedd9aea815 100644
--- a/addons/centered/README.md
+++ b/addons/centered/README.md
@@ -77,12 +77,12 @@ storiesOf('MyComponent', module)
 example for Angular with component:
 
 ```ts
-import { ngCentered } from '@storybook/addon-centered';
+import { centered } from '@storybook/addon-centered/angular';
 import { storiesOf } from '@storybook/angular';
 import { AppComponent } from '../app/app.component';
 
 storiesOf('Addon|Centered', module)
-  .addDecorator(ngCentered)
+  .addDecorator(centered)
   .add('centered component', () => ({
     component: AppComponent,
     props: {},
@@ -93,7 +93,7 @@ storiesOf('Addon|Centered', module)
 example for Angular with template:
 
 ```ts
-import { ngCentered } from '@storybook/addon-centered';
+import { centered } from '@storybook/addon-centered/angular';
 import { moduleMetadata, storiesOf } from '@storybook/angular';
 import { AppComponent } from '../app/app.component';
 
@@ -103,7 +103,7 @@ storiesOf('Addon|Centered', module)
       declarations: [Button],
     })
   )
-  .addDecorator(ngCentered)
+  .addDecorator(centered)
   .add('centered template', () => ({
     template: `<storybook-button-component 
         [text]="text" (onClick)="onClick($event)">
diff --git a/addons/centered/angular.d.ts b/addons/centered/angular.d.ts
new file mode 100644
index 000000000000..3178ab54afaf
--- /dev/null
+++ b/addons/centered/angular.d.ts
@@ -0,0 +1,5 @@
+import { IStory } from '@storybook/angular';
+
+declare module '@storybook/addon-centered/angular' {
+  export function centered(story: IStory): IStory;
+}
diff --git a/addons/centered/angular.js b/addons/centered/angular.js
new file mode 100644
index 000000000000..186e1ad93b2a
--- /dev/null
+++ b/addons/centered/angular.js
@@ -0,0 +1,3 @@
+import fromCentered from './dist/angular';
+
+export const centered = fromCentered;
diff --git a/addons/centered/src/index.js b/addons/centered/src/index.js
index e6738871e001..55de238e0da6 100644
--- a/addons/centered/src/index.js
+++ b/addons/centered/src/index.js
@@ -1,9 +1,6 @@
 import { window } from 'global';
 import ReactCentered from './react';
 import VueCentered from './vue';
-import AngularCentered from './angular';
 
 const Centered = window.STORYBOOK_ENV === 'vue' ? VueCentered : ReactCentered;
 export default Centered;
-
-export const ngCentered = AngularCentered;
diff --git a/examples/angular-cli/src/stories/addon-centered.stories.ts b/examples/angular-cli/src/stories/addon-centered.stories.ts
index 9d7308ad828f..9748d17255ff 100644
--- a/examples/angular-cli/src/stories/addon-centered.stories.ts
+++ b/examples/angular-cli/src/stories/addon-centered.stories.ts
@@ -1,10 +1,10 @@
-import { ngCentered } from '@storybook/addon-centered';
+import { centered } from '@storybook/addon-centered/angular';
 import { moduleMetadata, storiesOf } from '@storybook/angular';
 import { Button } from '@storybook/angular/demo';
 import { AppComponent } from '../app/app.component';
 
 storiesOf('Addon|Centered', module)
-  .addDecorator(ngCentered)
+  .addDecorator(centered)
   .add('centered component', () => ({
     component: AppComponent,
     props: {},
@@ -16,12 +16,12 @@ storiesOf('Addon|Centered', module)
       declarations: [Button],
     })
   )
-  .addDecorator(ngCentered)
+  .addDecorator(centered)
   .add('centered template', () => ({
     template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
     props: {
       text: 'Hello Button',
-      onClick: event => {
+      onClick: (event: Event) => {
         console.log('some bindings work');
         console.log(event);
       },