Created modules for custom components and the main fuse components

+ Changed the Shared Module (WIP)

src/@fuse/components/confirm-dialog/confirm-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { MatDialogRef } from '@angular/material';
 
 @Component({
@@ -6,7 +6,7 @@ import { MatDialogRef } from '@angular/material';
     templateUrl: './confirm-dialog.component.html',
     styleUrls  : ['./confirm-dialog.component.scss']
 })
-export class FuseConfirmDialogComponent implements OnInit
+export class FuseConfirmDialogComponent
 {
     public confirmMessage: string;
 
@@ -14,8 +14,4 @@ export class FuseConfirmDialogComponent implements OnInit
     {
     }
 
-    ngOnInit()
-    {
-    }
-
 }

src/@fuse/components/confirm-dialog/confirm-dialog.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { MatButtonModule, MatDialogModule } from '@angular/material';
+
+import { FuseConfirmDialogComponent } from '@fuse/components/confirm-dialog/confirm-dialog.component';
+
+@NgModule({
+    declarations: [
+        FuseConfirmDialogComponent
+    ],
+    imports: [
+        MatDialogModule,
+        MatButtonModule
+    ],
+    entryComponents: [
+        FuseConfirmDialogComponent
+    ],
+})
+export class FuseConfirmDialogModule
+{
+}

src/@fuse/components/countdown/countdown.component.ts

@@ -1,8 +1,9 @@
 import { Component, Input, OnInit } from '@angular/core';
-import * as moment from 'moment';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/observable/interval';
 
+import * as moment from 'moment';
+
 @Component({
     selector   : 'fuse-countdown',
     templateUrl: './countdown.component.html',

src/@fuse/components/countdown/countdown.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+
+import { FuseCountdownComponent } from '@fuse/components/countdown/countdown.component';
+
+@NgModule({
+    declarations: [
+        FuseCountdownComponent
+    ],
+    exports: [
+        FuseCountdownComponent
+    ],
+})
+export class FuseCountdownModule
+{
+}

src/@fuse/components/demo/demo.module.ts

@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../../modules/shared.module';
 import { RouterModule } from '@angular/router';
+
+import { MatDividerModule, MatListModule } from '@angular/material';
+
 import { FuseDemoContentComponent } from './demo-content/demo-content.component';
 import { FuseDemoSidenavComponent } from './demo-sidenav/demo-sidenav.component';
 
@@ -10,8 +12,10 @@ import { FuseDemoSidenavComponent } from './demo-sidenav/demo-sidenav.component'
         FuseDemoSidenavComponent
     ],
     imports     : [
-        SharedModule,
+        RouterModule,
-        RouterModule
+
+        MatDividerModule,
+        MatListModule
     ],
     exports     : [
         FuseDemoContentComponent,

src/@fuse/components/highlight/highlight.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+
+import { FuseHighlightComponent } from '@fuse/components/highlight/highlight.component';
+
+@NgModule({
+    declarations: [
+        FuseHighlightComponent
+    ],
+    exports: [
+        FuseHighlightComponent
+    ],
+})
+export class FuseHighlightModule
+{
+}

src/@fuse/components/index.ts

@@ -0,0 +1,11 @@
+export * from './confirm-dialog/confirm-dialog.module';
+export * from './countdown/countdown.module';
+export * from './demo/demo.module';
+export * from './highlight/highlight.module';
+export * from './material-color-picker/material-color-picker.module';
+export * from './navigation/navigation.module';
+export * from './search-bar/search-bar.module';
+export * from './shortcuts/shortcuts.module';
+export * from './sidebar/sidebar.module';
+export * from './theme-options/theme-options.module';
+export * from './widget/widget.module';

src/@fuse/components/material-color-picker/material-color-picker.component.ts

@@ -1,6 +1,7 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, Output, ViewEncapsulation } from '@angular/core';
-import { MatColors } from '../../matColors';
+
-import { fuseAnimations } from '../../animations/index';
+import { fuseAnimations } from '@fuse/animations';
+import { MatColors } from '@fuse/mat-colors';
 
 @Component({
     selector     : 'fuse-material-color-picker',
@@ -9,7 +10,7 @@ import { fuseAnimations } from '../../animations/index';
     animations   : fuseAnimations,
     encapsulation: ViewEncapsulation.None
 })
-export class FuseMaterialColorPickerComponent implements OnInit, OnChanges
+export class FuseMaterialColorPickerComponent implements OnChanges
 {
     colors: any;
     selectedColor: any;
@@ -91,9 +92,19 @@ export class FuseMaterialColorPickerComponent implements OnInit, OnChanges
         this.hues = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', 'A100', 'A200', 'A400', 'A700'];
     }
 
-    ngOnInit()
+    ngOnChanges(changes: any)
     {
-
+        if ( changes.selectedBg && changes.selectedBg.currentValue === '' ||
+            changes.selectedClass && changes.selectedClass.currentValue === '' ||
+            changes.selectedPalette && changes.selectedPalette.currentValue === '' )
+        {
+            this.removeColor();
+            return;
+        }
+        if ( changes.selectedPalette || changes.selectedHue || changes.selectedClass || changes.selectedBg )
+        {
+            this.updateSelectedColor();
+        }
     }
     
     selectPalette(palette)
@@ -172,19 +183,4 @@ export class FuseMaterialColorPickerComponent implements OnInit, OnChanges
             this.view = 'hues';
         }
     }
-
-    ngOnChanges(changes: any)
-    {
-        if ( changes.selectedBg && changes.selectedBg.currentValue === '' ||
-            changes.selectedClass && changes.selectedClass.currentValue === '' ||
-            changes.selectedPalette && changes.selectedPalette.currentValue === '' )
-        {
-            this.removeColor();
-            return;
-        }
-        if ( changes.selectedPalette || changes.selectedHue || changes.selectedClass || changes.selectedBg )
-        {
-            this.updateSelectedColor();
-        }
-    }
 }

src/@fuse/components/material-color-picker/material-color-picker.module.ts

@@ -0,0 +1,31 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatButtonModule, MatIconModule, MatMenuModule } from '@angular/material';
+
+import { FusePipesModule } from '@fuse/pipes/pipes.module';
+
+import { FuseMaterialColorPickerComponent } from '@fuse/components/material-color-picker/material-color-picker.component';
+
+@NgModule({
+    declarations: [
+        FuseMaterialColorPickerComponent
+    ],
+    imports: [
+        CommonModule,
+
+        FlexLayoutModule,
+
+        MatButtonModule,
+        MatIconModule,
+        MatMenuModule,
+
+        FusePipesModule
+    ],
+    exports: [
+        FuseMaterialColorPickerComponent
+    ],
+})
+export class FuseMaterialColorPickerModule
+{
+}

src/@fuse/components/navigation/navigation.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../../modules/shared.module';
+import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
+import { MatIconModule, MatRippleModule } from '@angular/material';
 
 import { FuseNavigationComponent } from './navigation.component';
 import { FuseNavVerticalItemComponent } from './vertical/nav-item/nav-vertical-item.component';
@@ -11,8 +12,11 @@ import { FuseNavHorizontalCollapseComponent } from './horizontal/nav-collapse/na
 
 @NgModule({
     imports     : [
-        SharedModule,
+        CommonModule,
-        RouterModule
+        RouterModule,
+
+        MatIconModule,
+        MatRippleModule,
     ],
     exports     : [
         FuseNavigationComponent

src/@fuse/components/search-bar/search-bar.component.ts

@@ -1,13 +1,14 @@
-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Output } from '@angular/core';
-import { FuseConfigService } from '../../services/config.service';
 import { Subscription } from 'rxjs/Subscription';
 
+import { FuseConfigService } from '@fuse/services/config.service';
+
 @Component({
     selector   : 'fuse-search-bar',
     templateUrl: './search-bar.component.html',
     styleUrls  : ['./search-bar.component.scss']
 })
-export class FuseSearchBarComponent implements OnInit
+export class FuseSearchBarComponent
 {
     collapsed: boolean;
     toolbarColor: string;
@@ -28,11 +29,6 @@ export class FuseSearchBarComponent implements OnInit
                 );
     }
 
-    ngOnInit()
-    {
-
-    }
-
     collapse()
     {
         this.collapsed = true;

src/@fuse/components/search-bar/search-bar.module.ts

@@ -1,7 +1,9 @@
 import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 
-import { SharedModule } from '../../modules/shared.module';
+import { MatIconModule } from '@angular/material';
+
 import { FuseSearchBarComponent } from './search-bar.component';
 
 @NgModule({
@@ -9,8 +11,10 @@ import { FuseSearchBarComponent } from './search-bar.component';
         FuseSearchBarComponent
     ],
     imports     : [
-        SharedModule,
+        CommonModule,
-        RouterModule
+        RouterModule,
+
+        MatIconModule
     ],
     exports     : [
         FuseSearchBarComponent

src/@fuse/components/shortcuts/shortcuts.component.ts

@@ -1,11 +1,12 @@
 import { Component, ElementRef, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
-import { FuseNavigationService } from '../navigation/navigation.service';
 import { Subscription } from 'rxjs/Subscription';
 import { ObservableMedia } from '@angular/flex-layout';
-import { FuseMatchMedia } from '../../services/match-media.service';
-import { FuseConfigService } from '../../services/config.service';
 import { CookieService } from 'ngx-cookie-service';
 
+import { FuseMatchMediaService } from '@fuse/services/match-media.service';
+import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
+import { FuseConfigService } from '@fuse/services/config.service';
+
 import { navigation } from 'app/navigation/navigation';
 
 @Component({
@@ -30,7 +31,7 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
     constructor(
         private renderer: Renderer2,
         private observableMedia: ObservableMedia,
-        private fuseMatchMedia: FuseMatchMedia,
+        private fuseMatchMedia: FuseMatchMediaService,
         private fuseNavigationService: FuseNavigationService,
         private fuseConfig: FuseConfigService,
         private cookieService: CookieService

src/@fuse/components/shortcuts/shortcuts.module.ts

@@ -1,19 +1,35 @@
 import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatDividerModule, MatFormFieldModule, MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatTooltipModule } from '@angular/material';
+import { CookieService } from 'ngx-cookie-service';
 
 import { FuseShortcutsComponent } from './shortcuts.component';
-import { SharedModule } from '../../modules/shared.module';
 
 @NgModule({
     declarations: [
         FuseShortcutsComponent
     ],
     imports     : [
-        SharedModule,
+        CommonModule,
-        RouterModule
+        RouterModule,
+
+        FlexLayoutModule,
+
+        MatDividerModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatMenuModule,
+        MatListModule,
+        MatTooltipModule
     ],
     exports     : [
         FuseShortcutsComponent
+    ],
+    providers   : [
+        CookieService
     ]
 })
 export class FuseShortcutsModule

src/@fuse/components/sidebar/sidebar.component.ts

@@ -4,7 +4,7 @@ import { ObservableMedia } from '@angular/flex-layout';
 import { Subscription } from 'rxjs/Subscription';
 
 import { FuseSidebarService } from './sidebar.service';
-import { FuseMatchMedia } from '@fuse/services/match-media.service';
+import { FuseMatchMediaService } from '@fuse/services/match-media.service';
 import { DOCUMENT } from '@angular/common';
 
 @Component({
@@ -66,7 +66,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
         private elementRef: ElementRef,
         private animationBuilder: AnimationBuilder,
         private sidebarService: FuseSidebarService,
-        private matchMedia: FuseMatchMedia,
+        private matchMedia: FuseMatchMediaService,
         private media: ObservableMedia,
         @Inject(DOCUMENT) private document: any
     )

src/@fuse/components/sidebar/sidebar.module.ts

@@ -1,7 +1,6 @@
 import { NgModule } from '@angular/core';
 
 import { FuseSidebarComponent } from './sidebar.component';
-import { FuseSidebarService } from './sidebar.service';
 
 @NgModule({
     declarations: [
@@ -9,9 +8,6 @@ import { FuseSidebarService } from './sidebar.service';
     ],
     exports     : [
         FuseSidebarComponent
-    ],
-    providers   : [
-        FuseSidebarService
     ]
 })
 export class FuseSidebarModule

src/@fuse/components/theme-options/theme-options.component.ts

@@ -1,11 +1,14 @@
 import { Component, ElementRef, HostBinding, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
 import { style, animate, AnimationBuilder, AnimationPlayer } from '@angular/animations';
 import { Subscription } from 'rxjs/Subscription';
-import { FuseConfigService } from '../../services/config.service';
+
-import { fuseAnimations } from '../../animations/index';
+import { fuseAnimations } from '@fuse/animations';
-import { FuseNavigationService } from '../navigation/navigation.service';
+import { FuseConfigService } from '@fuse/services/config.service';
+import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
+
 import { navigation } from 'app/navigation/navigation';
 
+
 @Component({
     selector   : 'fuse-theme-options',
     templateUrl: './theme-options.component.html',
@@ -71,6 +74,11 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
         });
     }
 
+    ngOnDestroy()
+    {
+        this.onConfigChanged.unsubscribe();
+    }
+
     onSettingsChange()
     {
         this.fuseConfig.setConfig(this.config);
@@ -105,9 +113,4 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
 
         this.player.play();
     }
-
-    ngOnDestroy()
-    {
-        this.onConfigChanged.unsubscribe();
-    }
 }

src/@fuse/components/theme-options/theme-options.module.ts

@@ -0,0 +1,36 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatDividerModule, MatFormFieldModule, MatIconModule, MatOptionModule, MatRadioModule, MatSelectModule, MatSlideToggleModule } from '@angular/material';
+
+import { FuseMaterialColorPickerModule } from '@fuse/components/material-color-picker/material-color-picker.module';
+import { FuseThemeOptionsComponent } from '@fuse/components/theme-options/theme-options.component';
+
+@NgModule({
+    declarations: [
+        FuseThemeOptionsComponent
+    ],
+    imports     : [
+        CommonModule,
+        FormsModule,
+
+        FlexLayoutModule,
+
+        MatDividerModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatOptionModule,
+        MatRadioModule,
+        MatSelectModule,
+        MatSlideToggleModule,
+
+        FuseMaterialColorPickerModule
+    ],
+    exports     : [
+        FuseThemeOptionsComponent
+    ]
+})
+export class FuseThemeOptionsModule
+{
+}

src/@fuse/components/widget/widget.component.ts

@@ -1,4 +1,4 @@
-import { AfterContentInit, Component, ContentChildren, ElementRef, HostBinding, OnInit, QueryList, Renderer2, ViewEncapsulation } from '@angular/core';
+import { AfterContentInit, Component, ContentChildren, ElementRef, HostBinding, QueryList, Renderer2, ViewEncapsulation } from '@angular/core';
 import { FuseWidgetToggleDirective } from './widget-toggle.directive';
 
 @Component({
@@ -8,7 +8,7 @@ import { FuseWidgetToggleDirective } from './widget-toggle.directive';
     encapsulation: ViewEncapsulation.None
 })
 
-export class FuseWidgetComponent implements OnInit, AfterContentInit
+export class FuseWidgetComponent implements AfterContentInit
 {
     @HostBinding('class.flipped') flipped = false;
     @ContentChildren(FuseWidgetToggleDirective, {descendants: true}) toggleButtons: QueryList<FuseWidgetToggleDirective>;
@@ -17,11 +17,6 @@ export class FuseWidgetComponent implements OnInit, AfterContentInit
     {
     }
 
-    ngOnInit()
-    {
-
-    }
-
     ngAfterContentInit()
     {
         setTimeout(() => {

src/@fuse/components/widget/widget.module.ts

@@ -1,20 +1,17 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../../modules/shared.module';
+
 import { FuseWidgetComponent } from './widget.component';
 import { FuseWidgetToggleDirective } from './widget-toggle.directive';
 
 @NgModule({
-    imports     : [
+    declarations: [
-        SharedModule
+        FuseWidgetComponent,
+        FuseWidgetToggleDirective
     ],
     exports     : [
         FuseWidgetComponent,
         FuseWidgetToggleDirective
     ],
-    declarations: [
-        FuseWidgetComponent,
-        FuseWidgetToggleDirective
-    ]
 })
 export class FuseWidgetModule
 {

src/@fuse/directives/directives.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+
+import { FuseIfOnDomDirective } from '@fuse/directives/fuse-if-on-dom/fuse-if-on-dom.directive';
+import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
+import { FuseMatSidenavHelperDirective, FuseMatSidenavTogglerDirective } from '@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.directive';
+
+@NgModule({
+    declarations: [
+        FuseIfOnDomDirective,
+        FuseMatSidenavHelperDirective,
+        FuseMatSidenavTogglerDirective,
+        FusePerfectScrollbarDirective
+    ],
+    imports     : [],
+    exports     : [
+        FuseIfOnDomDirective,
+        FuseMatSidenavHelperDirective,
+        FuseMatSidenavTogglerDirective,
+        FusePerfectScrollbarDirective
+    ]
+})
+export class FuseDirectivesModule
+{
+}

src/@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.directive.ts

@@ -2,8 +2,9 @@ import { Directive, Input, OnInit, HostListener, OnDestroy, HostBinding } from '
 import { MatSidenav } from '@angular/material';
 import { ObservableMedia } from '@angular/flex-layout';
 import { Subscription } from 'rxjs/Subscription';
-import { FuseMatchMedia } from '../../services/match-media.service';
+
-import { FuseMatSidenavHelperService } from './fuse-mat-sidenav-helper.service';
+import { FuseMatchMediaService } from '@fuse/services/match-media.service';
+import { FuseMatSidenavHelperService } from '@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.service';
 
 @Directive({
     selector: '[fuseMatSidenavHelper]'
@@ -19,7 +20,7 @@ export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy
 
     constructor(
         private fuseMatSidenavService: FuseMatSidenavHelperService,
-        private fuseMatchMedia: FuseMatchMedia,
+        private fuseMatchMedia: FuseMatchMediaService,
         private observableMedia: ObservableMedia,
         private matSidenav: MatSidenav
     )

src/@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts

@@ -1,9 +1,12 @@
 import { AfterViewInit, Directive, ElementRef, HostListener, OnDestroy } from '@angular/core';
-import { FuseConfigService } from '../../services/config.service';
-import { Subscription } from 'rxjs/Subscription';
 import { Platform } from '@angular/cdk/platform';
+import { Subscription } from 'rxjs/Subscription';
+
 import PerfectScrollbar from 'perfect-scrollbar';
 
+import { FuseConfigService } from '@fuse/services/config.service';
+
+
 @Directive({
     selector: '[fusePerfectScrollbar]'
 })

src/@fuse/fuse.module.ts

@@ -1,15 +1,25 @@
 import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';
 
 import { FUSE_CONFIG, FuseConfigService } from '@fuse/services/config.service';
+import { FuseCopierService } from '@fuse/services/copier.service';
+import { FuseMatchMediaService } from '@fuse/services/match-media.service';
+import { FuseMatSidenavHelperService } from '@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.service';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
+import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
 import { FuseSplashScreenService } from '@fuse/services/splash-screen.service';
+import { FuseTranslationLoaderService } from '@fuse/services/translation-loader.service';
 
 @NgModule({
-    declarations: [],
+    entryComponents: [],
     providers      : [
         FuseConfigService,
+        FuseCopierService,
+        FuseMatchMediaService,
+        FuseMatSidenavHelperService,
         FuseNavigationService,
-        FuseSplashScreenService
+        FuseSidebarService,
+        FuseSplashScreenService,
+        FuseTranslationLoaderService
     ]
 })
 export class FuseModule

src/@fuse/pipes/filter.pipe.ts

@@ -1,5 +1,5 @@
 import { Pipe, PipeTransform } from '@angular/core';
-import { FuseUtils } from '../fuseUtils';
+import { FuseUtils } from '@fuse/utils';
 
 @Pipe({name: 'filter'})
 export class FilterPipe implements PipeTransform

src/@fuse/pipes/pipes.module.ts

@@ -13,7 +13,6 @@ import { CamelCaseToDashPipe } from './camelCaseToDash.pipe';
         HtmlToPlaintextPipe,
         FilterPipe,
         CamelCaseToDashPipe
-
     ],
     imports     : [],
     exports     : [
@@ -24,8 +23,6 @@ import { CamelCaseToDashPipe } from './camelCaseToDash.pipe';
         CamelCaseToDashPipe
     ]
 })
-
 export class FusePipesModule
 {
-
 }

src/@fuse/services/copier.service.ts

@@ -9,7 +9,7 @@
 import { Injectable } from '@angular/core';
 
 @Injectable()
-export class CopierService
+export class FuseCopierService
 {
 
     private textarea: HTMLTextAreaElement;

src/@fuse/services/match-media.service.ts

@@ -3,7 +3,7 @@ import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 @Injectable()
-export class FuseMatchMedia
+export class FuseMatchMediaService
 {
     activeMediaQuery: string;
     onMediaChange: BehaviorSubject<string> = new BehaviorSubject<string>('');

src/@fuse/shared.module.ts

@@ -0,0 +1,35 @@
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+
+import { FlexLayoutModule } from '@angular/flex-layout';
+
+import { FusePipesModule } from './pipes/pipes.module';
+
+import { FuseDirectivesModule } from '@fuse/directives/directives';
+
+@NgModule({
+    imports  : [
+        CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+
+        FlexLayoutModule,
+
+        FuseDirectivesModule,
+        FusePipesModule
+    ],
+    exports  : [
+        CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+
+        FlexLayoutModule,
+
+        FuseDirectivesModule,
+        FusePipesModule
+    ]
+})
+export class FuseSharedModule
+{
+}

src/app/app.module.ts

@@ -5,16 +5,19 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule, Routes } from '@angular/router';
 import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
 import 'hammerjs';
-import { SharedModule } from '@fuse/modules/shared.module';
+
+import { FuseModule } from '@fuse/fuse.module';
+import { FuseSharedModule } from '@fuse/shared.module';
+
+// import { SharedModule } from 'app/shared/shared.module';
+import { config } from './config';
+
 import { AppComponent } from './app.component';
 import { FuseFakeDbService } from './fuse-fake-db/fuse-fake-db.service';
 import { FuseMainModule } from './main/main.module';
 import { TranslateModule } from '@ngx-translate/core';
 import { AppStoreModule } from './store/store.module';
 
-import { FuseModule } from '@fuse/fuse.module';
-import { config } from './config';
-
 const appRoutes: Routes = [
     {
         path        : 'apps',
@@ -61,10 +64,11 @@ const appRoutes: Routes = [
             passThruUnknownUrl: true
         }),
 
-        SharedModule,
+        // SharedModule,
 
-        // Fuse Module
+        // Fuse Main and Shared modules
         FuseModule.forRoot(config),
+        FuseSharedModule,
 
         AppStoreModule,
         FuseMainModule

src/app/main/content/apps/academy/academy.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseSharedModule } from '@fuse/shared.module';
 
 import { FuseAcademyCoursesComponent } from './courses/courses.component';
 import { FuseAcademyCourseComponent } from './course/course.component';
@@ -31,7 +31,7 @@ const routes = [
 
 @NgModule({
     imports     : [
-        SharedModule,
+        FuseSharedModule,
         RouterModule.forChild(routes)
     ],
     declarations: [

src/app/main/content/apps/apps.module.ts

@@ -3,7 +3,7 @@ import { RouterModule } from '@angular/router';
 
 import { FuseAngularMaterialModule } from '../components/angular-material/angular-material.module';
 
-import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseSharedModule } from '@fuse/shared.module';
 
 const routes = [
     {
@@ -58,7 +58,7 @@ const routes = [
 
 @NgModule({
     imports     : [
-        SharedModule,
+        FuseSharedModule,
         RouterModule.forChild(routes),
         FuseAngularMaterialModule
     ],

src/app/main/content/apps/calendar/calendar.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseSharedModule } from '@fuse/shared.module';
 
 import { CalendarService } from './calendar.service';
 import { CalendarModule } from 'angular-calendar';
@@ -21,7 +21,7 @@ const routes: Routes = [
 
 @NgModule({
     imports        : [
-        SharedModule,
+        FuseSharedModule,
         RouterModule.forChild(routes),
         CalendarModule.forRoot()
     ],

src/app/main/content/apps/calendar/event-form/event-form.component.ts

@@ -2,7 +2,7 @@ import { Component, Inject, ViewEncapsulation } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
 
-import { MatColors } from '@fuse/matColors';
+import { MatColors } from '@fuse/mat-colors';
 
 import { CalendarEvent } from 'angular-calendar';
 import { CalendarEventModel } from '../event.model';

src/app/main/content/apps/chat/chat.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseSharedModule } from '@fuse/shared.module';
 
 import { FuseChatComponent } from './chat.component';
 import { ChatService } from './chat.service';
@@ -26,7 +26,7 @@ const routes: Routes = [
 
 @NgModule({
     imports     : [
-        SharedModule,
+        FuseSharedModule,
         RouterModule.forChild(routes)
     ],
     declarations: [

src/app/main/content/apps/chat/chat.service.ts

@@ -6,7 +6,7 @@ import { Observable } from 'rxjs/Observable';
 import { Subject } from 'rxjs/Subject';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
-import { FuseUtils } from '@fuse/fuseUtils';
+import { FuseUtils } from '@fuse/utils';
 
 @Injectable()
 export class ChatService implements Resolve<any>

src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { ObservableMedia } from '@angular/flex-layout';
 
 import { fuseAnimations } from '@fuse/animations';
-import { FuseMatSidenavHelperService } from '@fuse/directives/fuse-mat-sidenav-helper/fuse-mat-sidenav-helper.service';
+import { FuseMatSidenavHelperService } from '@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.service';
 
 import { ChatService } from '../../../chat.service';
 

src/app/main/content/apps/contacts/contact.model.ts

@@ -1,4 +1,4 @@
-import { FuseUtils } from '@fuse/fuseUtils';
+import { FuseUtils } from '@fuse/utils';
 
 export class Contact
 {

src/app/main/content/apps/contacts/contacts.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseSharedModule } from '@fuse/shared.module';
 
 import { FuseContactsMainSidenavComponent } from './sidenavs/main/main.component';
 import { FuseContactsComponent } from './contacts.component';
@@ -22,7 +22,7 @@ const routes: Routes = [
 
 @NgModule({
     imports        : [
-        SharedModule,
+        FuseSharedModule,
         RouterModule.forChild(routes)
     ],
     declarations   : [

src/app/main/content/apps/contacts/contacts.service.ts

@@ -5,7 +5,7 @@ import { Observable } from 'rxjs/Observable';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import { Subject } from 'rxjs/Subject';
 
-import { FuseUtils } from '@fuse/fuseUtils';
+import { FuseUtils } from '@fuse/utils';
 
 import { Contact } from './contact.model';
 

src/app/main/content/apps/dashboards/analytics/analytics.module.ts

@@ -4,7 +4,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { NgxChartsModule } from '@swimlane/ngx-charts';
 import { AgmCoreModule } from '@agm/core';
 
-import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseSharedModule } from '@fuse/shared.module';
 import { FuseWidgetModule } from '@fuse/components/widget/widget.module';
 
 import { FuseAnalyticsDashboardComponent } from './analytics.component';
@@ -23,7 +23,7 @@ const routes: Routes = [
 
 @NgModule({
     imports     : [
-        SharedModule,
+        FuseSharedModule,
         RouterModule.forChild(routes),
         FuseWidgetModule,
         NgxChartsModule,

src/app/main/content/apps/dashboards/project/project.module.ts

@@ -3,7 +3,7 @@ import { RouterModule, Routes } from '@angular/router';
 
 import { NgxChartsModule } from '@swimlane/ngx-charts';
 
-import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseSharedModule } from '@fuse/shared.module';
 import { FuseWidgetModule } from '@fuse/components/widget/widget.module';
 
 import { FuseProjectDashboardComponent } from './project.component';
@@ -21,7 +21,7 @@ const routes: Routes = [
 
 @NgModule({
     imports     : [
-        SharedModule,
+        FuseSharedModule,
         RouterModule.forChild(routes),
         FuseWidgetModule,
         NgxChartsModule

src/app/main/content/apps/e-commerce/e-commerce.module.ts

@@ -4,7 +4,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { NgxChartsModule } from '@swimlane/ngx-charts';
 import { AgmCoreModule } from '@agm/core';
 
-import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseSharedModule } from '@fuse/shared.module';
 import { FuseWidgetModule } from '@fuse/components/widget/widget.module';
 
 import { FuseEcommerceDashboardComponent } from './dashboard/dashboard.component';
@@ -65,7 +65,7 @@ const routes: Routes = [
 
 @NgModule({
     imports     : [
-        SharedModule,
+        FuseSharedModule,
         RouterModule.forChild(routes),
         FuseWidgetModule,
         NgxChartsModule,

src/app/main/content/apps/e-commerce/order/order.model.ts

@@ -1,4 +1,4 @@
-import { FuseUtils } from '@fuse/fuseUtils';
+import { FuseUtils } from '@fuse/utils';
 
 export class Order
 {

src/app/main/content/apps/e-commerce/orders/orders.component.ts

@@ -11,7 +11,7 @@ import 'rxjs/add/operator/distinctUntilChanged';
 import 'rxjs/add/observable/fromEvent';
 
 import { fuseAnimations } from '@fuse/animations';
-import { FuseUtils } from '@fuse/fuseUtils';
+import { FuseUtils } from '@fuse/utils';
 
 import { EcommerceOrdersService } from './orders.service';
 

src/app/main/content/apps/e-commerce/product/product.component.ts

@@ -11,7 +11,7 @@ import 'rxjs/add/observable/fromEvent';
 import { Subscription } from 'rxjs/Subscription';
 
 import { fuseAnimations } from '@fuse/animations';
-import { FuseUtils } from '@fuse/fuseUtils';
+import { FuseUtils } from '@fuse/utils';
 
 import { Product } from './product.model';
 import { EcommerceProductService } from './product.service';

src/app/main/content/apps/e-commerce/product/product.model.ts

@@ -1,6 +1,6 @@
 import { MatChipInputEvent } from '@angular/material';
 
-import { FuseUtils } from '@fuse/fuseUtils';
+import { FuseUtils } from '@fuse/utils';
 
 export class Product
 {

src/app/main/content/apps/e-commerce/products/products.component.ts

@@ -12,7 +12,7 @@ import { Observable } from 'rxjs/Observable';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 import { fuseAnimations } from '@fuse/animations';
-import { FuseUtils } from '@fuse/fuseUtils';
+import { FuseUtils } from '@fuse/utils';
 
 import { EcommerceProductsService } from './products.service';
 

src/app/main/content/apps/file-manager/file-manager.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseSharedModule } from '@fuse/shared.module';
 
 import { FuseFileManagerComponent } from './file-manager.component';
 import { FileManagerService } from './file-manager.service';
@@ -22,7 +22,7 @@ const routes: Routes = [
 
 @NgModule({
     imports     : [
-        SharedModule,
+        FuseSharedModule,
         RouterModule.forChild(routes)
     ],
     declarations: [

src/app/main/content/apps/mail-ngrx/mail.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseSharedModule } from '@fuse/shared.module';
 
 import { FuseMailNgrxComponent } from './mail.component';
 import { FuseMailNgrxMainSidenavComponent } from './sidenavs/main/main-sidenav.component';
@@ -60,7 +60,7 @@ const routes: Routes = [
         FuseMailNgrxComposeDialogComponent
     ],
     imports        : [
-        SharedModule,
+        FuseSharedModule,
         RouterModule.forChild(routes),
         MailAppStoreModule
     ],

src/app/main/content/apps/mail-ngrx/store/selectors/mails.selectors.ts

@@ -1,4 +1,4 @@
-import { FuseUtils } from '@fuse/fuseUtils';
+import { FuseUtils } from '@fuse/utils';
 
 import { createSelector } from '@ngrx/store';
 import { getMailAppState, MailAppState, MailsState } from '../reducers';

src/app/main/content/apps/mail/mail.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseSharedModule } from '@fuse/shared.module';
 
 import { MailService } from './mail.service';
 import { FuseMailComponent } from './mail.component';
@@ -70,7 +70,7 @@ const routes: Routes = [
         FuseMailComposeDialogComponent
     ],
     imports        : [
-        SharedModule,
+        FuseSharedModule,
         RouterModule.forChild(routes)
     ],
     providers      : [

src/app/main/content/apps/mail/mail.service.ts

@@ -5,7 +5,7 @@ import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/r
 import { Observable } from 'rxjs/Observable';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
-import { FuseUtils } from '@fuse/fuseUtils';
+import { FuseUtils } from '@fuse/utils';
 
 import { Mail } from './mail.model';
 

src/app/main/content/apps/scrumboard/board.model.ts

@@ -1,4 +1,4 @@
-import { FuseUtils } from '@fuse/fuseUtils';
+import { FuseUtils } from '@fuse/utils';
 
 import { List } from './list.model';
 import { Card } from './card.model';

src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.ts

@@ -3,8 +3,8 @@ import { NgForm } from '@angular/forms/src/forms';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogRef, MatMenuTrigger } from '@angular/material';
 import { Subscription } from 'rxjs/Subscription';
 
-import { FuseUtils } from '@fuse/fuseUtils';
 import { FuseConfirmDialogComponent } from '@fuse/components/confirm-dialog/confirm-dialog.component';
+import { FuseUtils } from '@fuse/utils';
 
 import { ScrumboardService } from '../../../scrumboard.service';
 

src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.ts

@@ -1,8 +1,8 @@
 import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewEncapsulation } from '@angular/core';
 import { Subscription } from 'rxjs/Subscription';
 
-import { FuseUtils } from '@fuse/fuseUtils';
 import { fuseAnimations } from '@fuse/animations';
+import { FuseUtils } from '@fuse/utils';
 
 import { ScrumboardService } from '../../../../scrumboard.service';
 

src/app/main/content/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs/Subscription';
 
-import { MatColors } from '@fuse/matColors';
+import { MatColors } from '@fuse/mat-colors';
 
 import { ScrumboardService } from '../../../../scrumboard.service';
 

src/app/main/content/apps/scrumboard/card.model.ts

@@ -1,4 +1,4 @@
-import { FuseUtils } from '@fuse/fuseUtils';
+import { FuseUtils } from '@fuse/utils';
 
 export class Card
 {

src/app/main/content/apps/scrumboard/list.model.ts

@@ -1,4 +1,4 @@
-import { FuseUtils } from '@fuse/fuseUtils';
+import { FuseUtils } from '@fuse/utils';
 
 export class List
 {

src/app/main/content/apps/scrumboard/scrumboard.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseSharedModule } from '@fuse/shared.module';
 
 import { BoardResolve, ScrumboardService } from './scrumboard.service';
 import { FuseScrumboardComponent } from './scrumboard.component';
@@ -54,7 +54,7 @@ const routes: Routes = [
         FuseScrumboardBoardColorSelectorComponent
     ],
     imports        : [
-        SharedModule,
+        FuseSharedModule,
         RouterModule.forChild(routes)
     ],
     providers      : [

src/app/main/content/apps/todo/todo-details/todo-details.component.ts

@@ -4,7 +4,7 @@ import { Subscription } from 'rxjs/Subscription';
 import 'rxjs/add/operator/debounceTime';
 import 'rxjs/add/operator/distinctUntilChanged';
 
-import { FuseUtils } from '@fuse/fuseUtils';
+import { FuseUtils } from '@fuse/utils';
 import { fuseAnimations } from '@fuse/animations';
 
 import { Todo } from '../todo.model';

src/app/main/content/apps/todo/todo.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseSharedModule } from '@fuse/shared.module';
 
 import { TodoService } from './todo.service';
 import { FuseTodoComponent } from './todo.component';
@@ -68,7 +68,7 @@ const routes: Routes = [
         FuseTodoDetailsComponent
     ],
     imports     : [
-        SharedModule,
+        FuseSharedModule,
         RouterModule.forChild(routes)
     ],
     providers   : [

src/app/main/content/apps/todo/todo.service.ts

@@ -6,7 +6,7 @@ import { Observable } from 'rxjs/Observable';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import { Subject } from 'rxjs/Subject';
 
-import { FuseUtils } from '@fuse/fuseUtils';
+import { FuseUtils } from '@fuse/utils';
 
 import { Todo } from './todo.model';
 

src/app/main/content/components-third-party/components-third-party.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseSharedModule } from '@fuse/shared.module';
 
 import { FuseNgxDatatableComponent } from './datatable/ngx-datatable.component';
 import { GoogleMapsModule } from './google-maps/google-maps.module';
@@ -15,7 +15,7 @@ const routes = [
 
 @NgModule({
     imports     : [
-        SharedModule,
+        FuseSharedModule,
         RouterModule.forChild(routes),
         GoogleMapsModule
     ],

src/app/main/content/components-third-party/google-maps/google-maps.module.ts

@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { AgmCoreModule } from '@agm/core';
 
-import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseSharedModule } from '@fuse/shared.module';
 
 import { FuseGoogleMapsDocsComponent } from './google-maps.component';
 
@@ -15,7 +15,7 @@ const routes = [
 
 @NgModule({
     imports     : [
-        SharedModule,
+        FuseSharedModule,
         RouterModule.forChild(routes),
         AgmCoreModule.forRoot({
             apiKey: 'AIzaSyD81ecsCj4yYpcXSLFcYU97PvRsE_X8Bx8'

src/app/main/content/components/angular-material/angular-material.module.ts

@@ -1,12 +1,14 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseSharedModule } from '@fuse/shared.module';
 import { FuseWidgetModule } from '@fuse/components/widget/widget.module';
 
 import { EXAMPLE_LIST } from './example-components';
 import { FuseExampleViewerComponent } from './example-viewer/example-viewer';
 import { FuseAngularMaterialComponent } from './angular-material.component';
+import { MaterialModule } from 'app/main/content/components/angular-material/material.module';
+import { FuseHighlightModule } from '@fuse/components';
 
 const routes: Routes = [
     {
@@ -22,12 +24,11 @@ const routes: Routes = [
 
 @NgModule({
     imports        : [
-        SharedModule,
         RouterModule.forChild(routes),
-        FuseWidgetModule
+        MaterialModule,
-    ],
+        FuseSharedModule,
-    exports        : [
+        FuseWidgetModule,
-        SharedModule
+        FuseHighlightModule
     ],
     entryComponents: EXAMPLE_LIST,
     declarations   : [

src/app/main/content/components/angular-material/example-viewer/example-viewer.ts

@@ -6,8 +6,8 @@ import 'prismjs/components/prism-typescript';
 
 import { EXAMPLE_COMPONENTS } from '../example-components';
 
-import { CopierService } from '@fuse/components/copier/copier.service';
 import { fuseAnimations } from '@fuse/animations';
+import { FuseCopierService } from '@fuse/services/copier.service';
 
 export interface LiveExample
 {
@@ -21,7 +21,6 @@ export interface LiveExample
     selector     : 'fuse-example-viewer',
     templateUrl  : './example-viewer.html',
     styleUrls    : ['./example-viewer.scss'],
-    providers    : [CopierService],
     encapsulation: ViewEncapsulation.None,
     animations   : fuseAnimations
 })
@@ -51,7 +50,7 @@ export class FuseExampleViewerComponent implements AfterViewInit, OnDestroy
 
     constructor(
         private snackbar: MatSnackBar,
-        private copier: CopierService,
+        private copier: FuseCopierService,
         private _resolver: ComponentFactoryResolver
     )
     {

src/app/main/content/components/angular-material/material.module.ts

@@ -0,0 +1,112 @@
+import { NgModule } from '@angular/core';
+import {
+    MatAutocompleteModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatCheckboxModule,
+    MatToolbarModule,
+    MatTooltipModule,
+    MatCardModule,
+    MatChipsModule,
+    MatDatepickerModule,
+    MatDialogModule,
+    MatExpansionModule,
+    MatFormFieldModule,
+    MatGridListModule,
+    MatIconModule,
+    MatInputModule,
+    MatListModule,
+    MatMenuModule,
+    MatNativeDateModule,
+    MatPaginatorModule,
+    MatProgressBarModule,
+    MatProgressSpinnerModule,
+    MatRadioModule,
+    MatRippleModule,
+    MatSelectModule,
+    MatSidenavModule,
+    MatSliderModule,
+    MatSlideToggleModule,
+    MatSnackBarModule,
+    MatSortModule,
+    MatTableModule,
+    MatTabsModule,
+    MatStepperModule
+} from '@angular/material';
+import { CdkTableModule } from '@angular/cdk/table';
+
+@NgModule({
+    imports: [
+        MatAutocompleteModule,
+        MatButtonModule,
+        MatButtonToggleModule,
+        MatCardModule,
+        MatCheckboxModule,
+        MatChipsModule,
+        MatDatepickerModule,
+        MatDialogModule,
+        MatExpansionModule,
+        MatFormFieldModule,
+        MatGridListModule,
+        MatIconModule,
+        MatInputModule,
+        MatListModule,
+        MatMenuModule,
+        MatNativeDateModule,
+        MatPaginatorModule,
+        MatProgressBarModule,
+        MatProgressSpinnerModule,
+        MatRadioModule,
+        MatRippleModule,
+        MatSelectModule,
+        MatSidenavModule,
+        MatSliderModule,
+        MatSlideToggleModule,
+        MatSnackBarModule,
+        MatStepperModule,
+        MatSortModule,
+        MatTableModule,
+        MatTabsModule,
+        MatToolbarModule,
+        MatTooltipModule,
+        CdkTableModule
+    ],
+    exports: [
+        MatAutocompleteModule,
+        MatButtonModule,
+        MatButtonToggleModule,
+        MatCardModule,
+        MatCheckboxModule,
+        MatChipsModule,
+        MatDatepickerModule,
+        MatDialogModule,
+        MatExpansionModule,
+        MatGridListModule,
+        MatIconModule,
+        MatInputModule,
+        MatListModule,
+        MatMenuModule,
+        MatNativeDateModule,
+        MatPaginatorModule,
+        MatProgressBarModule,
+        MatProgressSpinnerModule,
+        MatRadioModule,
+        MatRippleModule,
+        MatSelectModule,
+        MatSidenavModule,
+        MatSliderModule,
+        MatSlideToggleModule,
+        MatSnackBarModule,
+        MatStepperModule,
+        MatSortModule,
+        MatTableModule,
+        MatTabsModule,
+        MatToolbarModule,
+        MatTooltipModule,
+        CdkTableModule
+    ]
+})
+export class MaterialModule
+{
+
+}

src/app/main/content/components/components.module.ts

@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { NgxChartsModule } from '@swimlane/ngx-charts';
 
-import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseSharedModule } from '@fuse/shared.module';
 import { FuseWidgetModule } from '@fuse/components/widget/widget.module';
 
 import { FuseAngularMaterialModule } from './angular-material/angular-material.module';
@@ -57,7 +57,7 @@ const routes = [
 
 @NgModule({
     imports     : [
-        SharedModule,
+        FuseSharedModule,
         RouterModule.forChild(routes),
         FuseWidgetModule,
         FuseAngularMaterialModule,

src/app/main/content/content.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { FuseSharedModule } from '@fuse/shared.module';
+
+import { FuseContentComponent } from 'app/main/content/content.component';
+
+@NgModule({
+    declarations: [
+        FuseContentComponent
+    ],
+    imports     : [
+        RouterModule,
+        FuseSharedModule,
+    ],
+    exports: [
+        FuseContentComponent
+    ]
+})
+export class FuseContentModule
+{
+}

src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseSharedModule } from '@fuse/shared.module';
 
 import { FuseForgotPassword2Component } from './forgot-password-2.component';
 
@@ -17,7 +17,7 @@ const routes = [
         FuseForgotPassword2Component
     ],
     imports     : [
-        SharedModule,
+        FuseSharedModule,
         RouterModule.forChild(routes)
     ]
 })

src/app/main/content/pages/authentication/forgot-password/forgot-password.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseSharedModule } from '@fuse/shared.module';
 
 import { FuseForgotPasswordComponent } from './forgot-password.component';
 
@@ -17,7 +17,7 @@ const routes = [
         FuseForgotPasswordComponent
     ],
     imports     : [
-        SharedModule,
+        FuseSharedModule,
         RouterModule.forChild(routes)
     ]
 })

src/app/main/content/pages/authentication/lock/lock.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseSharedModule } from '@fuse/shared.module';
 
 import { FuseLockComponent } from './lock.component';
 
@@ -17,7 +17,7 @@ const routes = [
         FuseLockComponent
     ],
     imports     : [
-        SharedModule,
+        FuseSharedModule,
         RouterModule.forChild(routes)
     ]
 })

src/app/main/content/pages/authentication/login-2/login-2.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseSharedModule } from '@fuse/shared.module';
 
 import { FuseLogin2Component } from './login-2.component';
 
@@ -17,7 +17,7 @@ const routes = [
         FuseLogin2Component
     ],
     imports     : [
-        SharedModule,
+        FuseSharedModule,
         RouterModule.forChild(routes)
     ]
 })

src/app/main/content/pages/authentication/login/login.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseSharedModule } from '@fuse/shared.module';
 
 import { FuseLoginComponent } from './login.component';
 
@@ -17,7 +17,7 @@ const routes = [
         FuseLoginComponent
     ],
     imports     : [
-        SharedModule,
+        FuseSharedModule,
         RouterModule.forChild(routes)
     ]
 })

src/app/main/content/pages/authentication/mail-confirm/mail-confirm.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseSharedModule } from '@fuse/shared.module';
 
 import { FuseMailConfirmComponent } from './mail-confirm.component';
 
@@ -17,7 +17,7 @@ const routes = [
         FuseMailConfirmComponent
     ],
     imports     : [
-        SharedModule,
+        FuseSharedModule,
         RouterModule.forChild(routes)
     ]
 })

src/app/main/content/pages/authentication/register-2/register-2.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseSharedModule } from '@fuse/shared.module';
 
 import { FuseRegister2Component } from './register-2.component';
 
@@ -17,7 +17,7 @@ const routes = [
         FuseRegister2Component
     ],
     imports     : [
-        SharedModule,
+        FuseSharedModule,
         RouterModule.forChild(routes)
     ]
 })

src/app/main/content/pages/authentication/register/register.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseSharedModule } from '@fuse/shared.module';
 
 import { FuseRegisterComponent } from './register.component';
 
@@ -17,7 +17,7 @@ const routes = [
         FuseRegisterComponent
     ],
     imports     : [
-        SharedModule,
+        FuseSharedModule,
         RouterModule.forChild(routes)
     ]
 })

src/app/main/content/pages/authentication/reset-password-2/reset-password-2.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseSharedModule } from '@fuse/shared.module';
 
 import { FuseResetPassword2Component } from './reset-password-2.component';
 
@@ -17,7 +17,7 @@ const routes = [
         FuseResetPassword2Component
     ],
     imports     : [
-        SharedModule,
+        FuseSharedModule,
         RouterModule.forChild(routes)
     ]
 })

src/app/main/content/pages/authentication/reset-password/reset-password.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseSharedModule } from '@fuse/shared.module';
 
 import { FuseResetPasswordComponent } from './reset-password.component';
 
@@ -17,7 +17,7 @@ const routes = [
         FuseResetPasswordComponent
     ],
     imports     : [
-        SharedModule,
+        FuseSharedModule,
         RouterModule.forChild(routes)
     ]
 })

src/app/main/content/pages/coming-soon/coming-soon.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseSharedModule } from '@fuse/shared.module';
 
 import { FuseComingSoonComponent } from './coming-soon.component';
 
@@ -17,7 +17,7 @@ const routes = [
         FuseComingSoonComponent
     ],
     imports     : [
-        SharedModule,
+        FuseSharedModule,
         RouterModule.forChild(routes)
     ]
 })

src/app/main/content/pages/errors/404/error-404.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseSharedModule } from '@fuse/shared.module';
 
 import { FuseError404Component } from './error-404.component';
 
@@ -17,7 +17,7 @@ const routes = [
         FuseError404Component
     ],
     imports     : [
-        SharedModule,
+        FuseSharedModule,
         RouterModule.forChild(routes)
     ]
 })

src/app/main/content/pages/errors/500/error-500.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseSharedModule } from '@fuse/shared.module';
 
 import { FuseError500Component } from './error-500.component';
 
@@ -17,7 +17,7 @@ const routes = [
         FuseError500Component
     ],
     imports     : [
-        SharedModule,
+        FuseSharedModule,
         RouterModule.forChild(routes)
     ]
 })

src/app/main/content/pages/faq/faq.component.ts

@@ -4,7 +4,7 @@ import { Subscription } from 'rxjs/Subscription';
 import 'rxjs/add/operator/debounceTime';
 import 'rxjs/add/operator/distinctUntilChanged';
 
-import { FuseUtils } from '@fuse/fuseUtils';
+import { FuseUtils } from '@fuse/utils';
 
 import { FaqService } from './faq.service';
 

src/app/main/content/pages/faq/faq.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseSharedModule } from '@fuse/shared.module';
 
 import { FaqService } from './faq.service';
 import { FuseFaqComponent } from './faq.component';
@@ -21,7 +21,7 @@ const routes = [
         FuseFaqComponent
     ],
     imports     : [
-        SharedModule,
+        FuseSharedModule,
         RouterModule.forChild(routes)
     ],
     providers   : [

src/app/main/content/pages/invoices/compact/compact.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseSharedModule } from '@fuse/shared.module';
 
 import { InvoiceService } from '../invoice.service';
 import { FuseInvoiceCompactComponent } from './compact.component';
@@ -21,7 +21,7 @@ const routes = [
         FuseInvoiceCompactComponent
     ],
     imports     : [
-        SharedModule,
+        FuseSharedModule,
         RouterModule.forChild(routes)
     ],
     providers   : [

src/app/main/content/pages/invoices/modern/modern.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseSharedModule } from '@fuse/shared.module';
 
 import { InvoiceService } from '../invoice.service';
 import { FuseInvoiceModernComponent } from './modern.component';
@@ -21,7 +21,7 @@ const routes = [
         FuseInvoiceModernComponent
     ],
     imports     : [
-        SharedModule,
+        FuseSharedModule,
         RouterModule.forChild(routes)
     ],
     providers   : [

src/app/main/content/pages/knowledge-base/knowledge-base.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseSharedModule } from '@fuse/shared.module';
 
 import { KnowledgeBaseService } from './knowledge-base.service';
 import { FuseKnowledgeBaseComponent } from './knowledge-base.component';
@@ -23,7 +23,7 @@ const routes = [
         FuseKnowledgeBaseArticleComponent
     ],
     imports        : [
-        SharedModule,
+        FuseSharedModule,
         RouterModule.forChild(routes)
     ],
     providers      : [

src/app/main/content/pages/maintenance/maintenence.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseSharedModule } from '@fuse/shared.module';
 
 import { FuseMaintenanceComponent } from './maintenance.component';
 
@@ -17,7 +17,7 @@ const routes = [
         FuseMaintenanceComponent
     ],
     imports     : [
-        SharedModule,
+        FuseSharedModule,
         RouterModule.forChild(routes)
     ]
 })

src/app/main/content/pages/pricing/pricing.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseSharedModule } from '@fuse/shared.module';
 
 import { FusePricingStyle1Component } from './style-1/style-1.component';
 import { FusePricingStyle2Component } from './style-2/style-2.component';
@@ -29,7 +29,7 @@ const routes = [
         FusePricingStyle3Component
     ],
     imports     : [
-        SharedModule,
+        FuseSharedModule,
         RouterModule.forChild(routes)
     ]
 })

src/app/main/content/pages/profile/profile.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseSharedModule } from '@fuse/shared.module';
 
 import { ProfileService } from './profile.service';
 import { FuseProfileComponent } from './profile.component';
@@ -27,7 +27,7 @@ const routes = [
         FuseProfilePhotosVideosComponent
     ],
     imports     : [
-        SharedModule,
+        FuseSharedModule,
         RouterModule.forChild(routes)
     ],
     providers   : [

src/app/main/content/pages/search/search.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseSharedModule } from '@fuse/shared.module';
 
 import { SearchService } from './search.service';
 import { FuseSearchClassicComponent } from './tabs/classic/classic.component';
@@ -25,7 +25,7 @@ const routes = [
         FuseSearchTableComponent
     ],
     imports     : [
-        SharedModule,
+        FuseSharedModule,
         RouterModule.forChild(routes)
     ],
     providers   : [

src/app/main/content/services/services.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseSharedModule } from '@fuse/shared.module';
 
 import { FuseConfigServiceDocsComponent } from './config/config.component';
 import { FuseSplashScreenServiceDocsComponent } from './splash-screen/splash-screen.component';
@@ -19,7 +19,7 @@ const routes = [
 
 @NgModule({
     imports     : [
-        SharedModule,
+        FuseSharedModule,
         RouterModule.forChild(routes)
     ],
     declarations: [

src/app/main/content/ui/colors/colors.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 
-import { MatColors } from '@fuse/matColors';
+import { MatColors } from '@fuse/mat-colors';
 
 @Component({
     selector   : 'fuse-colors',

src/app/main/content/ui/colors/colors.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseSharedModule } from '@fuse/shared.module';
 import { FuseDemoModule } from '@fuse/components/demo/demo.module';
 
 import { FuseColorsComponent } from './colors.component';
@@ -15,7 +15,7 @@ const routes: Routes = [
 
 @NgModule({
     imports     : [
-        SharedModule,
+        FuseSharedModule,
         RouterModule.forChild(routes),
         FuseDemoModule
     ],

src/app/main/content/ui/forms/forms.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseSharedModule } from '@fuse/shared.module';
 
 import { FuseFormsComponent } from './forms.component';
 
@@ -14,7 +14,7 @@ const routes: Routes = [
 
 @NgModule({
     imports     : [
-        SharedModule,
+        FuseSharedModule,
         RouterModule.forChild(routes)
     ],
     declarations: [

src/app/main/content/ui/helper-classes/helper-classes.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-import { SharedModule } from '@fuse/modules/shared.module';
+import { FuseSharedModule } from '@fuse/shared.module';
 
 import { FuseHelperClassesComponent } from './helper-classes.component';
 import { FuseHelperClassesPaddingMarginComponent } from './tabs/padding-margin/padding-margin.component';
@@ -16,7 +16,7 @@ const routes: Routes = [
 
 @NgModule({
     imports     : [
-        SharedModule,
+        FuseSharedModule,
         RouterModule.forChild(routes)
     ],
     declarations: [