Take benefits from tree-shaking support in Fabric

Lion Huang · Lion Huang · commit 8c0e24c90364 · 2019-01-25T11:41:32.000-08:00
diff --git a/libs/fabric/package.json b/libs/fabric/package.json
@@ -9,38 +9,7 @@
         "react": "React",
         "react-dom": "ReactDOM",
         "@angular-react/core": "ɵa",
-        "office-ui-fabric-react/lib/Breadcrumb": "Breadcrumb",
-        "office-ui-fabric-react/lib/Button": "Button",
-        "office-ui-fabric-react/lib/Calendar": "Calendar",
-        "office-ui-fabric-react/lib/Callout": "Callout",
-        "office-ui-fabric-react/lib/Checkbox": "Checkbox",
-        "office-ui-fabric-react/lib/ChoiceGroup": "ChoiceGroup",
-        "office-ui-fabric-react/lib/ComboBox": "ComboBox",
-        "office-ui-fabric-react/lib/CommandBar": "CommandBar",
-        "office-ui-fabric-react/lib/DatePicker": "DatePicker",
-        "office-ui-fabric-react/lib/DetailsList": "DetailsList",
-        "office-ui-fabric-react/lib/Dialog": "Dialog",
-        "office-ui-fabric-react/lib/Divider": "Divider",
-        "office-ui-fabric-react/lib/Fabric": "Fabric",
-        "office-ui-fabric-react/lib/GroupedList": "GroupedList",
-        "office-ui-fabric-react/lib/HoverCard": "HoverCard",
-        "office-ui-fabric-react/lib/Icon": "Icon",
-        "office-ui-fabric-react/lib/Image": "Image",
-        "office-ui-fabric-react/lib/Link": "Link",
-        "office-ui-fabric-react/lib/MarqueeSelection": "MarqueeSelection",
-        "office-ui-fabric-react/lib/MessageBar": "MessageBar",
-        "office-ui-fabric-react/lib/Modal": "Modal",
-        "office-ui-fabric-react/lib/Panel": "Panel",
-        "office-ui-fabric-react/lib/Persona": "Persona",
-        "office-ui-fabric-react/lib/Pivot": "Pivot",
-        "office-ui-fabric-react/lib/SearchBox": "SearchBox",
-        "office-ui-fabric-react/lib/Shimmer": "Shimmer",
-        "office-ui-fabric-react/lib/Slider": "Slider",
-        "office-ui-fabric-react/lib/SpinButton": "SpinButton",
-        "office-ui-fabric-react/lib/Spinner": "Spinner",
-        "office-ui-fabric-react/lib/TextField": "TextField",
-        "office-ui-fabric-react/lib/Toggle": "Toggle",
-        "office-ui-fabric-react/lib/Tooltip": "Tooltip"
+        "office-ui-fabric-react": "Fabric"
       },
       "comments": "none"
     },
diff --git a/libs/fabric/src/lib/components/breadcrumb/breadcrumb.module.ts b/libs/fabric/src/lib/components/breadcrumb/breadcrumb.module.ts
@@ -4,7 +4,7 @@
 import { registerElement } from '@angular-react/core';
 import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import { Breadcrumb } from 'office-ui-fabric-react/lib/Breadcrumb';
+import { Breadcrumb } from 'office-ui-fabric-react';
 import { FabBreadcrumbComponent } from './breadcrumb.component';
 
 const components = [FabBreadcrumbComponent];
diff --git a/libs/fabric/src/lib/components/button/button.module.ts b/libs/fabric/src/lib/components/button/button.module.ts
@@ -12,7 +12,7 @@ import {
   IconButton,
   MessageBarButton,
   PrimaryButton,
-} from 'office-ui-fabric-react/lib/Button';
+} from 'office-ui-fabric-react';
 import { FabActionButtonComponent } from './action-button.component';
 import { FabCommandBarButtonComponent } from './command-bar-button.component';
 import { FabCompoundButtonComponent } from './compound-button.component';
diff --git a/libs/fabric/src/lib/components/calendar/calendar.module.ts b/libs/fabric/src/lib/components/calendar/calendar.module.ts
@@ -4,14 +4,9 @@
 import { registerElement } from '@angular-react/core';
 import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import * as CalendarCss from 'office-ui-fabric-react/lib-amd/components/Calendar/Calendar.scss';
-import { Calendar } from 'office-ui-fabric-react/lib/Calendar';
-import { noop } from '../../utils/noop';
+import { Calendar } from 'office-ui-fabric-react';
 import { FabCalendarComponent } from './calendar.component';
 
-// Dummy action to force CalendarCss to load and not be tree-shaken away.
-noop(CalendarCss);
-
 const components = [FabCalendarComponent];
 
 @NgModule({
diff --git a/libs/fabric/src/lib/components/callout/callout.module.ts b/libs/fabric/src/lib/components/callout/callout.module.ts
@@ -4,7 +4,7 @@
 import { registerElement } from '@angular-react/core';
 import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import { Callout } from 'office-ui-fabric-react/lib/Callout';
+import { Callout } from 'office-ui-fabric-react';
 import { FabCalloutComponent } from './callout.component';
 
 const components = [FabCalloutComponent];
diff --git a/libs/fabric/src/lib/components/checkbox/checkbox.module.ts b/libs/fabric/src/lib/components/checkbox/checkbox.module.ts
@@ -4,7 +4,7 @@
 import { registerElement } from '@angular-react/core';
 import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
+import { Checkbox } from 'office-ui-fabric-react';
 import { FabCheckboxComponent } from './checkbox.component';
 
 const components = [FabCheckboxComponent];
diff --git a/libs/fabric/src/lib/components/choice-group/choice-group.module.ts b/libs/fabric/src/lib/components/choice-group/choice-group.module.ts
@@ -4,7 +4,7 @@
 import { registerElement } from '@angular-react/core';
 import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import { ChoiceGroup } from 'office-ui-fabric-react/lib/ChoiceGroup';
+import { ChoiceGroup } from 'office-ui-fabric-react';
 import { FabChoiceGroupComponent } from './choice-group.component';
 
 const components = [FabChoiceGroupComponent];
diff --git a/libs/fabric/src/lib/components/combo-box/combo-box.module.ts b/libs/fabric/src/lib/components/combo-box/combo-box.module.ts
@@ -4,7 +4,7 @@
 import { registerElement } from '@angular-react/core';
 import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import { ComboBox, VirtualizedComboBox } from 'office-ui-fabric-react/lib/ComboBox';
+import { ComboBox, VirtualizedComboBox } from 'office-ui-fabric-react';
 import { FabComboBoxComponent } from './combo-box.component';
 import { FabVirtualizedComboBoxComponent } from './virtualized-combo-box.component';
 
diff --git a/libs/fabric/src/lib/components/command-bar/command-bar.module.ts b/libs/fabric/src/lib/components/command-bar/command-bar.module.ts
@@ -4,9 +4,7 @@
 import { registerElement } from '@angular-react/core';
 import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import * as OverflowSetCss from 'office-ui-fabric-react/lib-amd/components/OverflowSet/OverflowSet.scss';
-import { CommandBar } from 'office-ui-fabric-react/lib/CommandBar';
-import { noop } from '../../utils/noop';
+import { CommandBar } from 'office-ui-fabric-react';
 import { FabContextualMenuModule } from '../contextual-menu/contextual-menu.module';
 import { FabCommandBarComponent } from './command-bar.component';
 import {
@@ -20,9 +18,6 @@ import {
   CommandBarOverflowItemsDirective,
 } from './directives/command-bar-items.directives';
 
-// Dummy action to force OverflowSetCss to load and not be tree-shaken away.
-noop(OverflowSetCss);
-
 const components = [
   FabCommandBarComponent,
   CommandBarItemsDirective,
diff --git a/libs/fabric/src/lib/components/date-picker/date-picker.module.ts b/libs/fabric/src/lib/components/date-picker/date-picker.module.ts
@@ -5,13 +5,8 @@ import { registerElement } from '@angular-react/core';
 import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { DatePicker } from 'office-ui-fabric-react';
-import * as CalendarCss from 'office-ui-fabric-react/lib-amd/components/Calendar/Calendar.scss';
-import { noop } from '../../utils/noop';
 import { FabDatePickerComponent } from './date-picker.component';
 
-// Dummy action to force CalendarCss to load and not be tree-shaken away.
-noop(CalendarCss);
-
 const components = [FabDatePickerComponent];
 
 @NgModule({
diff --git a/libs/fabric/src/lib/components/details-list/details-list.module.ts b/libs/fabric/src/lib/components/details-list/details-list.module.ts
@@ -4,7 +4,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { registerElement } from '@angular-react/core';
-import { DetailsList } from 'office-ui-fabric-react/lib/DetailsList';
+import { DetailsList } from 'office-ui-fabric-react';
 
 import { FabGroupModule } from '../group/group.module';
 import { FabDetailsListComponent } from './details-list.component';
diff --git a/libs/fabric/src/lib/components/dialog/dialog.module.ts b/libs/fabric/src/lib/components/dialog/dialog.module.ts
@@ -4,7 +4,7 @@
 import { registerElement } from '@angular-react/core';
 import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import { Dialog, DialogContent, DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
+import { Dialog, DialogContent, DialogFooter } from 'office-ui-fabric-react';
 import { FabDialogComponent, FabDialogContentComponent, FabDialogFooterComponent } from './dialog.component';
 
 const components = [FabDialogComponent, FabDialogContentComponent, FabDialogFooterComponent];
diff --git a/libs/fabric/src/lib/components/divider/divider.module.ts b/libs/fabric/src/lib/components/divider/divider.module.ts
@@ -4,7 +4,7 @@
 import { registerElement } from '@angular-react/core';
 import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import { VerticalDivider } from 'office-ui-fabric-react/lib/Divider';
+import { VerticalDivider } from 'office-ui-fabric-react';
 import { FabDividerComponent } from './divider.component';
 
 const components = [FabDividerComponent];
diff --git a/libs/fabric/src/lib/components/dropdown/dropdown.module.ts b/libs/fabric/src/lib/components/dropdown/dropdown.module.ts
@@ -4,7 +4,7 @@
 import { registerElement } from '@angular-react/core';
 import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown';
+import { Dropdown } from 'office-ui-fabric-react';
 import { FabDropdownComponent } from './dropdown.component';
 
 const components = [FabDropdownComponent];
diff --git a/libs/fabric/src/lib/components/fabric/fabric.module.ts b/libs/fabric/src/lib/components/fabric/fabric.module.ts
@@ -4,7 +4,7 @@
 import { registerElement } from '@angular-react/core';
 import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
+import { Fabric } from 'office-ui-fabric-react';
 import { FabFabricComponent } from './fabric.component';
 
 const components = [FabFabricComponent];
diff --git a/libs/fabric/src/lib/components/grouped-list/grouped-list.module.ts b/libs/fabric/src/lib/components/grouped-list/grouped-list.module.ts
@@ -4,7 +4,7 @@
 import { registerElement } from '@angular-react/core';
 import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import { GroupedList } from 'office-ui-fabric-react/lib/GroupedList';
+import { GroupedList } from 'office-ui-fabric-react';
 import { FabGroupedListComponent } from './grouped-list.component';
 
 const components = [FabGroupedListComponent];
diff --git a/libs/fabric/src/lib/components/hover-card/hover-card.module.ts b/libs/fabric/src/lib/components/hover-card/hover-card.module.ts
@@ -4,7 +4,7 @@
 import { registerElement } from '@angular-react/core';
 import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import { ExpandingCard, HoverCard, PlainCard } from 'office-ui-fabric-react/lib/HoverCard';
+import { ExpandingCard, HoverCard, PlainCard } from 'office-ui-fabric-react';
 import { FabHoverCardComponent } from './hover-card.component';
 import { FabExpandingCardComponent } from './expanding-card.component';
 import { FabPlainCardComponent } from './plain-card.component';
diff --git a/libs/fabric/src/lib/components/icon/icon.module.ts b/libs/fabric/src/lib/components/icon/icon.module.ts
@@ -4,7 +4,7 @@
 import { registerElement } from '@angular-react/core';
 import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import { Icon } from 'office-ui-fabric-react/lib/Icon';
+import { Icon } from 'office-ui-fabric-react';
 import { FabIconComponent } from './icon.component';
 
 const components = [FabIconComponent];
diff --git a/libs/fabric/src/lib/components/image/image.module.ts b/libs/fabric/src/lib/components/image/image.module.ts
@@ -4,7 +4,7 @@
 import { registerElement } from '@angular-react/core';
 import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import { Image } from 'office-ui-fabric-react/lib/Image';
+import { Image } from 'office-ui-fabric-react';
 import { FabImageComponent } from './image.component';
 
 const components = [FabImageComponent];
diff --git a/libs/fabric/src/lib/components/link/link.component.ts b/libs/fabric/src/lib/components/link/link.component.ts
@@ -11,7 +11,7 @@ import {
   Renderer2,
   ViewChild,
 } from '@angular/core';
-import { ILinkProps, Link } from 'office-ui-fabric-react/lib/Link';
+import { ILinkProps, Link } from 'office-ui-fabric-react';
 
 @Component({
   selector: 'fab-link',
diff --git a/libs/fabric/src/lib/components/link/link.module.ts b/libs/fabric/src/lib/components/link/link.module.ts
@@ -4,7 +4,7 @@
 import { registerElement } from '@angular-react/core';
 import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import { Link } from 'office-ui-fabric-react/lib/Link';
+import { Link } from 'office-ui-fabric-react';
 import { FabLinkComponent } from './link.component';
 
 const components = [FabLinkComponent];
diff --git a/libs/fabric/src/lib/components/marquee-selection/marquee-selection.module.ts b/libs/fabric/src/lib/components/marquee-selection/marquee-selection.module.ts
@@ -4,7 +4,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { registerElement } from '@angular-react/core';
-import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection';
+import { MarqueeSelection } from 'office-ui-fabric-react';
 
 import { FabMarqueeSelectionComponent } from './marquee-selection.component';
 
diff --git a/libs/fabric/src/lib/components/message-bar/message-bar.module.ts b/libs/fabric/src/lib/components/message-bar/message-bar.module.ts
@@ -4,7 +4,7 @@
 import { registerElement } from '@angular-react/core';
 import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import { MessageBar } from 'office-ui-fabric-react/lib/MessageBar';
+import { MessageBar } from 'office-ui-fabric-react';
 import { FabMessageBarComponent } from './message-bar.component';
 
 const components = [FabMessageBarComponent];
diff --git a/libs/fabric/src/lib/components/modal/modal.module.ts b/libs/fabric/src/lib/components/modal/modal.module.ts
@@ -4,7 +4,7 @@
 import { registerElement } from '@angular-react/core';
 import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import { Modal } from 'office-ui-fabric-react/lib/Modal';
+import { Modal } from 'office-ui-fabric-react';
 import { FabModalComponent } from './modal.component';
 
 const components = [FabModalComponent];
diff --git a/libs/fabric/src/lib/components/panel/panel.module.ts b/libs/fabric/src/lib/components/panel/panel.module.ts
@@ -4,7 +4,7 @@
 import { registerElement } from '@angular-react/core';
 import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import { Panel } from 'office-ui-fabric-react/lib/Panel';
+import { Panel } from 'office-ui-fabric-react';
 import { FabPanelComponent } from './panel.component';
 
 const components = [FabPanelComponent];
diff --git a/libs/fabric/src/lib/components/persona/persona.module.ts b/libs/fabric/src/lib/components/persona/persona.module.ts
@@ -4,7 +4,7 @@
 import { registerElement } from '@angular-react/core';
 import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import { Persona, PersonaCoin } from 'office-ui-fabric-react/lib/Persona';
+import { Persona, PersonaCoin } from 'office-ui-fabric-react';
 import { FabPersonaCoinComponent, FabPersonaComponent } from './persona.component';
 
 const components = [FabPersonaComponent, FabPersonaCoinComponent];
diff --git a/libs/fabric/src/lib/components/pickers/base-picker/base-picker.module.ts b/libs/fabric/src/lib/components/pickers/base-picker/base-picker.module.ts
@@ -4,8 +4,8 @@
 import { registerElement } from '@angular-react/core';
 import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import * as BasePickerCss from 'office-ui-fabric-react/lib-amd/components/pickers/BasePicker.scss';
-import { BasePicker } from 'office-ui-fabric-react/lib/pickers';
+import * as BasePickerCss from 'office-ui-fabric-react';
+import { BasePicker } from 'office-ui-fabric-react';
 import { noop } from '../../../utils/noop';
 
 // Dummy action to force BasePickerCss to load and not be tree-shaken away.
diff --git a/libs/fabric/src/lib/components/pickers/tag-picker/tag-picker.module.ts b/libs/fabric/src/lib/components/pickers/tag-picker/tag-picker.module.ts
@@ -4,8 +4,8 @@
 import { registerElement } from '@angular-react/core';
 import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import * as TagItemCss from 'office-ui-fabric-react/lib-amd/components/pickers/TagPicker/TagItem.scss';
-import { TagPicker } from 'office-ui-fabric-react/lib/components/pickers';
+import * as TagItemCss from 'office-ui-fabric-react';
+import { TagPicker } from 'office-ui-fabric-react';
 import { noop } from '../../../utils/noop';
 import { FabBasePickerModule } from '../base-picker/base-picker.module';
 import { FabTagPickerComponent } from './tag-picker.component';
diff --git a/libs/fabric/src/lib/components/pivot/pivot.component.ts b/libs/fabric/src/lib/components/pivot/pivot.component.ts
@@ -17,7 +17,7 @@ import {
   Renderer2,
   ViewChild,
 } from '@angular/core';
-import { IPivotItemProps, IPivotProps, Pivot, PivotItem } from 'office-ui-fabric-react/lib/Pivot';
+import { IPivotItemProps, IPivotProps, Pivot, PivotItem } from 'office-ui-fabric-react';
 import * as React from 'react';
 
 @Component({
diff --git a/libs/fabric/src/lib/components/pivot/pivot.module.ts b/libs/fabric/src/lib/components/pivot/pivot.module.ts
@@ -4,7 +4,7 @@
 import { registerElement } from '@angular-react/core';
 import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import { Pivot, PivotItem } from 'office-ui-fabric-react/lib/Pivot';
+import { Pivot, PivotItem } from 'office-ui-fabric-react';
 import { FabPivotComponent, FabPivotItemComponent } from './pivot.component';
 
 const components = [FabPivotComponent, FabPivotItemComponent];
diff --git a/libs/fabric/src/lib/components/search-box/search-box.module.ts b/libs/fabric/src/lib/components/search-box/search-box.module.ts
@@ -4,7 +4,7 @@
 import { registerElement } from '@angular-react/core';
 import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox';
+import { SearchBox } from 'office-ui-fabric-react';
 import { FabSearchBoxComponent } from './search-box.component';
 
 const components = [FabSearchBoxComponent];
diff --git a/libs/fabric/src/lib/components/shimmer/shimmer.module.ts b/libs/fabric/src/lib/components/shimmer/shimmer.module.ts
@@ -4,7 +4,7 @@
 import { registerElement } from '@angular-react/core';
 import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import { Shimmer, ShimmerElementsGroup } from 'office-ui-fabric-react/lib/Shimmer';
+import { Shimmer, ShimmerElementsGroup } from 'office-ui-fabric-react';
 import { FabShimmerComponent, FabShimmerElementsGroupComponent } from './shimmer.component';
 
 const components = [FabShimmerComponent, FabShimmerElementsGroupComponent];
diff --git a/libs/fabric/src/lib/components/slider/slider.module.ts b/libs/fabric/src/lib/components/slider/slider.module.ts
@@ -4,7 +4,7 @@
 import { registerElement } from '@angular-react/core';
 import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import { Slider } from 'office-ui-fabric-react/lib/Slider';
+import { Slider } from 'office-ui-fabric-react';
 import { FabSliderComponent } from './slider.component';
 
 const components = [FabSliderComponent];
diff --git a/libs/fabric/src/lib/components/spin-button/spin-button.module.ts b/libs/fabric/src/lib/components/spin-button/spin-button.module.ts
@@ -4,7 +4,7 @@
 import { registerElement } from '@angular-react/core';
 import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import { SpinButton } from 'office-ui-fabric-react/lib/SpinButton';
+import { SpinButton } from 'office-ui-fabric-react';
 import { FabSpinButtonComponent } from './spin-button.component';
 
 const components = [FabSpinButtonComponent];
diff --git a/libs/fabric/src/lib/components/spinner/spinner.module.ts b/libs/fabric/src/lib/components/spinner/spinner.module.ts
@@ -4,7 +4,7 @@
 import { registerElement } from '@angular-react/core';
 import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import { Spinner } from 'office-ui-fabric-react/lib/Spinner';
+import { Spinner } from 'office-ui-fabric-react';
 import { FabSpinnerComponent } from './spinner.component';
 
 const components = [FabSpinnerComponent];
diff --git a/libs/fabric/src/lib/components/text-field/text-field.module.ts b/libs/fabric/src/lib/components/text-field/text-field.module.ts
@@ -4,7 +4,7 @@
 import { registerElement } from '@angular-react/core';
 import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import { TextField, MaskedTextField } from 'office-ui-fabric-react/lib/TextField';
+import { TextField, MaskedTextField } from 'office-ui-fabric-react';
 import { FabTextFieldComponent } from './text-field.component';
 import { FabMaskedTextFieldComponent } from './masked-text-field.component';
 
diff --git a/libs/fabric/src/lib/components/toggle/toggle.module.ts b/libs/fabric/src/lib/components/toggle/toggle.module.ts
@@ -4,7 +4,7 @@
 import { registerElement } from '@angular-react/core';
 import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
+import { Toggle } from 'office-ui-fabric-react';
 import { FabToggleComponent } from './toggle.component';
 
 const components = [FabToggleComponent];
diff --git a/libs/fabric/src/lib/components/tooltip/tooltip.module.ts b/libs/fabric/src/lib/components/tooltip/tooltip.module.ts
