Material module imports for the pages and rest of the Fuse

+ Couple tweaks & fixes

src/@fuse/components/navigation/vertical/nav-group/nav-vertical-group.component.ts

@@ -1,11 +1,11 @@
-import { Component, HostBinding, Input, OnInit } from '@angular/core';
+import { Component, HostBinding, Input } from '@angular/core';
 
 @Component({
     selector   : 'fuse-nav-vertical-group',
     templateUrl: './nav-vertical-group.component.html',
     styleUrls  : ['./nav-vertical-group.component.scss']
 })
-export class FuseNavVerticalGroupComponent implements OnInit
+export class FuseNavVerticalGroupComponent
 {
     @HostBinding('class') classes = 'nav-group nav-item';
     @Input() item: any;
@@ -14,8 +14,4 @@ export class FuseNavVerticalGroupComponent implements OnInit
     {
     }
 
-    ngOnInit()
-    {
-    }
-
 }

src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.ts

@@ -1,11 +1,11 @@
-import { Component, HostBinding, Input, OnInit } from '@angular/core';
+import { Component, HostBinding, Input } from '@angular/core';
 
 @Component({
     selector   : 'fuse-nav-vertical-item',
     templateUrl: './nav-vertical-item.component.html',
     styleUrls  : ['./nav-vertical-item.component.scss']
 })
-export class FuseNavVerticalItemComponent implements OnInit
+export class FuseNavVerticalItemComponent
 {
     @HostBinding('class') classes = 'nav-item';
     @Input() item: any;
@@ -13,8 +13,4 @@ export class FuseNavVerticalItemComponent implements OnInit
     constructor()
     {
     }
-
-    ngOnInit()
-    {
-    }
 }

src/@fuse/components/widget/widget-toggle.directive.ts

@@ -1,21 +1,11 @@
-import { AfterViewInit, Directive, ElementRef, OnInit } from '@angular/core';
+import { Directive, ElementRef } from '@angular/core';
 
 @Directive({
     selector: '[fuseWidgetToggle]'
 })
-export class FuseWidgetToggleDirective implements OnInit, AfterViewInit
+export class FuseWidgetToggleDirective
 {
-
     constructor(public el: ElementRef)
     {
     }
-
-    ngOnInit()
-    {
-    }
-
-    ngAfterViewInit()
-    {
-    }
-
 }

src/@fuse/modules/material.module.ts

@@ -1,112 +0,0 @@
-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/fuse-config.ts

@@ -1,4 +1,10 @@
-// Default Fuse config
+/**
+ * Default Fuse Configuration
+ *
+ * You can edit these options to change the default options. All these options also can be changed per component
+ * basis. See `app/main/content/pages/authentication/login/login.component.ts` constructor method to learn more
+ * about changing these options per component basis.
+ */
 export const fuseConfig = {
     layout          : {
         navigation      : 'left', // 'right', 'left', 'top', 'none'

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

@@ -1,11 +1,16 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
+import { MatButtonModule, MatCheckboxModule, MatIconModule } from '@angular/material';
+
+import { NgxDatatableModule } from '@swimlane/ngx-datatable';
+
 import { FuseSharedModule } from '@fuse/shared.module';
 
-import { FuseNgxDatatableComponent } from './datatable/ngx-datatable.component';
 import { GoogleMapsModule } from './google-maps/google-maps.module';
 
+import { FuseNgxDatatableComponent } from './datatable/ngx-datatable.component';
+
 const routes = [
     {
         path     : 'datatables/ngx-datatable',
@@ -14,14 +19,22 @@ const routes = [
 ];
 
 @NgModule({
-    imports     : [
-        FuseSharedModule,
-        RouterModule.forChild(routes),
-        GoogleMapsModule
-    ],
     declarations: [
         FuseNgxDatatableComponent
-    ]
+    ],
+    imports     : [
+        RouterModule.forChild(routes),
+
+        MatButtonModule,
+        MatCheckboxModule,
+        MatIconModule,
+
+        NgxDatatableModule,
+
+        FuseSharedModule,
+
+        GoogleMapsModule
+    ],
 })
 export class FuseComponentsThirdPartyModule
 {

src/app/main/content/components-third-party/datatable/ngx-datatable.component.html

@@ -57,14 +57,11 @@
                 </ng-template>
             </ngx-datatable-column>
 
-            <ngx-datatable-column name="Name" prop="name">
+            <ngx-datatable-column name="Name" prop="name"></ngx-datatable-column>
-            </ngx-datatable-column>
 
-            <ngx-datatable-column name="Last Name" prop="lastName">
+            <ngx-datatable-column name="Last Name" prop="lastName"></ngx-datatable-column>
-            </ngx-datatable-column>
 
-            <ngx-datatable-column name="Company" prop="company">
+            <ngx-datatable-column name="Company" prop="company"></ngx-datatable-column>
-            </ngx-datatable-column>
         </ngx-datatable>
 
     </div>

src/app/main/content/components-third-party/datatable/ngx-datatable.component.ts

@@ -14,7 +14,6 @@ export class FuseNgxDatatableComponent implements OnInit
 
     constructor(private http: HttpClient)
     {
-
     }
 
     ngOnInit()

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

@@ -1,8 +1,12 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
+
+import { MatButtonModule, MatIconModule } from '@angular/material';
+
 import { AgmCoreModule } from '@agm/core';
 
 import { FuseSharedModule } from '@fuse/shared.module';
+import { FuseHighlightModule } from '@fuse/components';
 
 import { FuseGoogleMapsDocsComponent } from './google-maps.component';
 
@@ -14,16 +18,22 @@ const routes = [
 ];
 
 @NgModule({
-    imports     : [
-        FuseSharedModule,
-        RouterModule.forChild(routes),
-        AgmCoreModule.forRoot({
-            apiKey: 'AIzaSyD81ecsCj4yYpcXSLFcYU97PvRsE_X8Bx8'
-        })
-    ],
     declarations: [
         FuseGoogleMapsDocsComponent
-    ]
+    ],
+    imports     : [
+        RouterModule.forChild(routes),
+
+        MatButtonModule,
+        MatIconModule,
+
+        AgmCoreModule.forRoot({
+            apiKey: 'AIzaSyD81ecsCj4yYpcXSLFcYU97PvRsE_X8Bx8'
+        }),
+
+        FuseSharedModule,
+        FuseHighlightModule
+    ],
 })
 export class GoogleMapsModule
 {

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

@@ -1,14 +1,15 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
+import { MaterialModule } from 'app/main/content/components/angular-material/material.module';
+
 import { FuseSharedModule } from '@fuse/shared.module';
+import { FuseHighlightModule } from '@fuse/components';
 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 = [
     {
@@ -23,19 +24,21 @@ const routes: Routes = [
 ];
 
 @NgModule({
-    imports        : [
-        RouterModule.forChild(routes),
-        MaterialModule,
-        FuseSharedModule,
-        FuseWidgetModule,
-        FuseHighlightModule
-    ],
-    entryComponents: EXAMPLE_LIST,
     declarations   : [
         [...EXAMPLE_LIST],
         FuseAngularMaterialComponent,
         FuseExampleViewerComponent
-    ]
+    ],
+    imports        : [
+        RouterModule.forChild(routes),
+
+        MaterialModule,
+
+        FuseSharedModule,
+        FuseHighlightModule,
+        FuseWidgetModule
+    ],
+    entryComponents: EXAMPLE_LIST,
 })
 export class FuseAngularMaterialModule
 {

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

@@ -1,9 +1,12 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
+
+import { MatButtonModule, MatButtonToggleModule, MatFormFieldModule, MatIconModule, MatListModule, MatMenuModule, MatSelectModule, MatSliderModule, MatSlideToggleModule, MatTabsModule } from '@angular/material';
+
 import { NgxChartsModule } from '@swimlane/ngx-charts';
 
 import { FuseSharedModule } from '@fuse/shared.module';
-import { FuseWidgetModule } from '@fuse/components/widget/widget.module';
+import { FuseCountdownModule, FuseHighlightModule, FuseMaterialColorPickerModule, FuseWidgetModule } from '@fuse/components';
 
 import { FuseAngularMaterialModule } from './angular-material/angular-material.module';
 import { FuseCardsDocsComponent } from './cards/cards.component';
@@ -56,13 +59,6 @@ const routes = [
 ];
 
 @NgModule({
-    imports     : [
-        FuseSharedModule,
-        RouterModule.forChild(routes),
-        FuseWidgetModule,
-        FuseAngularMaterialModule,
-        NgxChartsModule
-    ],
     declarations: [
         FuseCardsDocsComponent,
         FuseCountdownDocsComponent,
@@ -73,6 +69,28 @@ const routes = [
         FuseSearchBarDocsComponent,
         FuseShortcutsDocsComponent,
         FuseWidgetDocsComponent
+    ],
+    imports     : [
+        RouterModule.forChild(routes),
+
+        MatButtonModule,
+        MatButtonToggleModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatListModule,
+        MatMenuModule,
+        MatSelectModule,
+        MatSlideToggleModule,
+        MatTabsModule,
+
+        NgxChartsModule,
+
+        FuseSharedModule,
+        FuseCountdownModule,
+        FuseHighlightModule,
+        FuseMaterialColorPickerModule,
+        FuseWidgetModule,
+        FuseAngularMaterialModule
     ]
 })
 export class FuseComponentsModule

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

@@ -1,4 +1,4 @@
-import { Component, HostBinding, OnInit, OnDestroy } from '@angular/core';
+import { Component, HostBinding, OnDestroy } from '@angular/core';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 
 import { Subscription } from 'rxjs/Subscription';
@@ -14,7 +14,7 @@ import { FuseConfigService } from '@fuse/services/config.service';
     styleUrls  : ['./content.component.scss'],
     animations : fuseAnimations
 })
-export class FuseContentComponent implements OnInit, OnDestroy
+export class FuseContentComponent implements OnDestroy
 {
     onConfigChanged: Subscription;
     fuseSettings: any;
@@ -64,11 +64,6 @@ export class FuseContentComponent implements OnInit, OnDestroy
                 );
     }
 
-    ngOnInit()
-    {
-
-    }
-
     ngOnDestroy()
     {
         this.onConfigChanged.unsubscribe();

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

@@ -11,6 +11,7 @@ import { FuseContentComponent } from 'app/main/content/content.component';
     ],
     imports     : [
         RouterModule,
+
         FuseSharedModule,
     ],
     exports: [

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

@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
+import { MatButtonModule, MatFormFieldModule, MatInputModule } from '@angular/material';
+
 import { FuseSharedModule } from '@fuse/shared.module';
 
 import { FuseForgotPassword2Component } from './forgot-password-2.component';
@@ -17,8 +19,13 @@ const routes = [
         FuseForgotPassword2Component
     ],
     imports     : [
+        RouterModule.forChild(routes),
+
+        MatButtonModule,
+        MatFormFieldModule,
+        MatInputModule,
+
         FuseSharedModule,
-        RouterModule.forChild(routes)
     ]
 })
 export class ForgotPassword2Module

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

@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
+import { MatButtonModule, MatFormFieldModule, MatInputModule } from '@angular/material';
+
 import { FuseSharedModule } from '@fuse/shared.module';
 
 import { FuseForgotPasswordComponent } from './forgot-password.component';
@@ -17,8 +19,13 @@ const routes = [
         FuseForgotPasswordComponent
     ],
     imports     : [
+        RouterModule.forChild(routes),
+
+        MatButtonModule,
+        MatFormFieldModule,
+        MatInputModule,
+
         FuseSharedModule,
-        RouterModule.forChild(routes)
     ]
 })
 export class ForgotPasswordModule

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

@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
+import { MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule } from '@angular/material';
+
 import { FuseSharedModule } from '@fuse/shared.module';
 
 import { FuseLockComponent } from './lock.component';
@@ -17,8 +19,14 @@ const routes = [
         FuseLockComponent
     ],
     imports     : [
-        FuseSharedModule,
+        RouterModule.forChild(routes),
-        RouterModule.forChild(routes)
+
+        MatButtonModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+
+        FuseSharedModule
     ]
 })
 export class LockModule

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

@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
+import { MatButtonModule, MatCheckboxModule, MatFormFieldModule, MatInputModule } from '@angular/material';
+
 import { FuseSharedModule } from '@fuse/shared.module';
 
 import { FuseLogin2Component } from './login-2.component';
@@ -17,8 +19,14 @@ const routes = [
         FuseLogin2Component
     ],
     imports     : [
-        FuseSharedModule,
+        RouterModule.forChild(routes),
-        RouterModule.forChild(routes)
+
+        MatButtonModule,
+        MatCheckboxModule,
+        MatFormFieldModule,
+        MatInputModule,
+
+        FuseSharedModule
     ]
 })
 export class Login2Module

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

@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
+import { MatButtonModule, MatCheckboxModule, MatFormFieldModule, MatInputModule } from '@angular/material';
+
 import { FuseSharedModule } from '@fuse/shared.module';
 
 import { FuseLoginComponent } from './login.component';
@@ -17,8 +19,14 @@ const routes = [
         FuseLoginComponent
     ],
     imports     : [
-        FuseSharedModule,
+        RouterModule.forChild(routes),
-        RouterModule.forChild(routes)
+
+        MatButtonModule,
+        MatCheckboxModule,
+        MatFormFieldModule,
+        MatInputModule,
+
+        FuseSharedModule
     ]
 })
 export class LoginModule

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

@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
+import { MatIconModule } from '@angular/material';
+
 import { FuseSharedModule } from '@fuse/shared.module';
 
 import { FuseMailConfirmComponent } from './mail-confirm.component';
@@ -17,8 +19,11 @@ const routes = [
         FuseMailConfirmComponent
     ],
     imports     : [
-        FuseSharedModule,
+        RouterModule.forChild(routes),
-        RouterModule.forChild(routes)
+
+        MatIconModule,
+
+        FuseSharedModule
     ]
 })
 export class MailConfirmModule

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

@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
+import { MatButtonModule, MatCheckboxModule, MatFormFieldModule, MatInputModule } from '@angular/material';
+
 import { FuseSharedModule } from '@fuse/shared.module';
 
 import { FuseRegister2Component } from './register-2.component';
@@ -17,8 +19,14 @@ const routes = [
         FuseRegister2Component
     ],
     imports     : [
-        FuseSharedModule,
+        RouterModule.forChild(routes),
-        RouterModule.forChild(routes)
+
+        MatButtonModule,
+        MatCheckboxModule,
+        MatFormFieldModule,
+        MatInputModule,
+
+        FuseSharedModule
     ]
 })
 export class Register2Module

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

@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
+import { MatButtonModule, MatCheckboxModule, MatFormFieldModule, MatInputModule } from '@angular/material';
+
 import { FuseSharedModule } from '@fuse/shared.module';
 
 import { FuseRegisterComponent } from './register.component';
@@ -17,8 +19,14 @@ const routes = [
         FuseRegisterComponent
     ],
     imports     : [
-        FuseSharedModule,
+        RouterModule.forChild(routes),
-        RouterModule.forChild(routes)
+
+        MatButtonModule,
+        MatCheckboxModule,
+        MatFormFieldModule,
+        MatInputModule,
+
+        FuseSharedModule
     ]
 })
 export class RegisterModule

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

@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
+import { MatButtonModule, MatFormFieldModule, MatInputModule } from '@angular/material';
+
 import { FuseSharedModule } from '@fuse/shared.module';
 
 import { FuseResetPassword2Component } from './reset-password-2.component';
@@ -17,8 +19,13 @@ const routes = [
         FuseResetPassword2Component
     ],
     imports     : [
-        FuseSharedModule,
+        RouterModule.forChild(routes),
-        RouterModule.forChild(routes)
+
+        MatButtonModule,
+        MatFormFieldModule,
+        MatInputModule,
+
+        FuseSharedModule
     ]
 })
 export class ResetPassword2Module

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

@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
+import { MatButtonModule, MatFormFieldModule, MatInputModule } from '@angular/material';
+
 import { FuseSharedModule } from '@fuse/shared.module';
 
 import { FuseResetPasswordComponent } from './reset-password.component';
@@ -17,8 +19,13 @@ const routes = [
         FuseResetPasswordComponent
     ],
     imports     : [
-        FuseSharedModule,
+        RouterModule.forChild(routes),
-        RouterModule.forChild(routes)
+
+        MatButtonModule,
+        MatFormFieldModule,
+        MatInputModule,
+
+        FuseSharedModule
     ]
 })
 export class ResetPasswordModule

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

@@ -1,7 +1,10 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
+import { MatButtonModule, MatFormFieldModule, MatInputModule } from '@angular/material';
+
 import { FuseSharedModule } from '@fuse/shared.module';
+import { FuseCountdownModule } from '@fuse/components';
 
 import { FuseComingSoonComponent } from './coming-soon.component';
 
@@ -17,8 +20,14 @@ const routes = [
         FuseComingSoonComponent
     ],
     imports     : [
+        RouterModule.forChild(routes),
+
+        MatButtonModule,
+        MatFormFieldModule,
+        MatInputModule,
+
         FuseSharedModule,
-        RouterModule.forChild(routes)
+        FuseCountdownModule
     ]
 })
 export class ComingSoonModule

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

@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
+import { MatIconModule } from '@angular/material';
+
 import { FuseSharedModule } from '@fuse/shared.module';
 
 import { FuseError404Component } from './error-404.component';
@@ -17,8 +19,11 @@ const routes = [
         FuseError404Component
     ],
     imports     : [
-        FuseSharedModule,
+        RouterModule.forChild(routes),
-        RouterModule.forChild(routes)
+
+        MatIconModule,
+
+        FuseSharedModule
     ]
 })
 export class Error404Module

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

@@ -17,8 +17,9 @@ const routes = [
         FuseError500Component
     ],
     imports     : [
-        FuseSharedModule,
+        RouterModule.forChild(routes),
-        RouterModule.forChild(routes)
+
+        FuseSharedModule
     ]
 })
 export class Error500Module

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

@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
+import { MatExpansionModule, MatIconModule } from '@angular/material';
+
 import { FuseSharedModule } from '@fuse/shared.module';
 
 import { FaqService } from './faq.service';
@@ -21,8 +23,12 @@ const routes = [
         FuseFaqComponent
     ],
     imports     : [
-        FuseSharedModule,
+        RouterModule.forChild(routes),
-        RouterModule.forChild(routes)
+
+        MatExpansionModule,
+        MatIconModule,
+
+        FuseSharedModule
     ],
     providers   : [
         FaqService

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

@@ -21,8 +21,9 @@ const routes = [
         FuseInvoiceCompactComponent
     ],
     imports     : [
-        FuseSharedModule,
+        RouterModule.forChild(routes),
-        RouterModule.forChild(routes)
+
+        FuseSharedModule
     ],
     providers   : [
         InvoiceService

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

@@ -21,8 +21,9 @@ const routes = [
         FuseInvoiceModernComponent
     ],
     imports     : [
-        FuseSharedModule,
+        RouterModule.forChild(routes),
-        RouterModule.forChild(routes)
+
+        FuseSharedModule
     ],
     providers   : [
         InvoiceService

src/app/main/content/pages/knowledge-base/dialogs/article/article.component.html

@@ -11,10 +11,7 @@
     </div>
 
     <div mat-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="end center">
-        <button mat-button
+        <button mat-button (click)="dialogRef.close()" class="mat-accent" aria-label="Close">
-                (click)="dialogRef.close()"
-                class="mat-accent"
-                aria-label="Close">
             CLOSE
         </button>
     </div>

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

@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
+import { MatButtonModule, MatDialogModule, MatIconModule, MatListModule, MatToolbarModule } from '@angular/material';
+
 import { FuseSharedModule } from '@fuse/shared.module';
 
 import { KnowledgeBaseService } from './knowledge-base.service';
@@ -23,8 +25,15 @@ const routes = [
         FuseKnowledgeBaseArticleComponent
     ],
     imports        : [
-        FuseSharedModule,
+        RouterModule.forChild(routes),
-        RouterModule.forChild(routes)
+
+        MatButtonModule,
+        MatDialogModule,
+        MatIconModule,
+        MatListModule,
+        MatToolbarModule,
+
+        FuseSharedModule
     ],
     providers      : [
         KnowledgeBaseService

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

@@ -17,8 +17,9 @@ const routes = [
         FuseMaintenanceComponent
     ],
     imports     : [
-        FuseSharedModule,
+        RouterModule.forChild(routes),
-        RouterModule.forChild(routes)
+
+        FuseSharedModule
     ]
 })
 export class MaintenanceModule

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

@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
+import { MatButtonModule, MatDividerModule } from '@angular/material';
+
 import { FuseSharedModule } from '@fuse/shared.module';
 
 import { FusePricingStyle1Component } from './style-1/style-1.component';
@@ -29,8 +31,12 @@ const routes = [
         FusePricingStyle3Component
     ],
     imports     : [
-        FuseSharedModule,
+        RouterModule.forChild(routes),
-        RouterModule.forChild(routes)
+
+        MatButtonModule,
+        MatDividerModule,
+
+        FuseSharedModule
     ]
 })
 export class PricingModule

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

@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
+import { MatButtonModule, MatDividerModule, MatIconModule, MatTabsModule } from '@angular/material';
+
 import { FuseSharedModule } from '@fuse/shared.module';
 
 import { ProfileService } from './profile.service';
@@ -27,8 +29,14 @@ const routes = [
         FuseProfilePhotosVideosComponent
     ],
     imports     : [
-        FuseSharedModule,
+        RouterModule.forChild(routes),
-        RouterModule.forChild(routes)
+
+        MatButtonModule,
+        MatDividerModule,
+        MatIconModule,
+        MatTabsModule,
+
+        FuseSharedModule
     ],
     providers   : [
         ProfileService

src/app/main/content/pages/profile/tabs/timeline/timeline.component.html

@@ -27,6 +27,7 @@
                     </div>
 
                     <button mat-raised-button color="accent" class="post-button" aria-label="POST">POST</button>
+
                 </footer>
 
             </div>

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

@@ -1,5 +1,8 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
+import { CdkTableModule } from '@angular/cdk/table';
+
+import { MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatTableModule, MatTabsModule } from '@angular/material';
 
 import { FuseSharedModule } from '@fuse/shared.module';
 
@@ -25,8 +28,17 @@ const routes = [
         FuseSearchTableComponent
     ],
     imports     : [
-        FuseSharedModule,
+        RouterModule.forChild(routes),
-        RouterModule.forChild(routes)
+        CdkTableModule,
+
+        MatButtonModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatTableModule,
+        MatTabsModule,
+
+        FuseSharedModule
     ],
     providers   : [
         SearchService

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

@@ -1,7 +1,10 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
+import { MatIconModule } from '@angular/material';
+
 import { FuseSharedModule } from '@fuse/shared.module';
+import { FuseHighlightModule } from '@fuse/components';
 
 import { FuseConfigServiceDocsComponent } from './config/config.component';
 import { FuseSplashScreenServiceDocsComponent } from './splash-screen/splash-screen.component';
@@ -18,14 +21,18 @@ const routes = [
 ];
 
 @NgModule({
-    imports     : [
-        FuseSharedModule,
-        RouterModule.forChild(routes)
-    ],
     declarations: [
         FuseConfigServiceDocsComponent,
         FuseSplashScreenServiceDocsComponent
-    ]
+    ],
+    imports     : [
+        RouterModule.forChild(routes),
+
+        MatIconModule,
+
+        FuseSharedModule,
+        FuseHighlightModule
+    ],
 })
 
 export class FuseServicesModule

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

@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
+import { MatButtonModule, MatIconModule, MatTabsModule } from '@angular/material';
+
 import { FuseSharedModule } from '@fuse/shared.module';
 import { FuseDemoModule } from '@fuse/components/demo/demo.module';
 
@@ -14,13 +16,18 @@ const routes: Routes = [
 ];
 
 @NgModule({
-    imports     : [
-        FuseSharedModule,
-        RouterModule.forChild(routes),
-        FuseDemoModule
-    ],
     declarations: [
         FuseColorsComponent
+    ],
+    imports     : [
+        RouterModule.forChild(routes),
+
+        MatButtonModule,
+        MatIconModule,
+        MatTabsModule,
+
+        FuseSharedModule,
+        FuseDemoModule
     ]
 })
 export class UIColorsModule

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

@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
+import { MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatSelectModule, MatStepperModule } from '@angular/material';
+
 import { FuseSharedModule } from '@fuse/shared.module';
 
 import { FuseFormsComponent } from './forms.component';
@@ -13,12 +15,20 @@ const routes: Routes = [
 ];
 
 @NgModule({
-    imports     : [
-        FuseSharedModule,
-        RouterModule.forChild(routes)
-    ],
     declarations: [
         FuseFormsComponent
+    ],
+    imports     : [
+        RouterModule.forChild(routes),
+
+        MatButtonModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatSelectModule,
+        MatStepperModule,
+
+        FuseSharedModule,
     ]
 })
 export class UIFormsModule

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

@@ -1,7 +1,10 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
+import { MatIconModule, MatTabsModule } from '@angular/material';
+
 import { FuseSharedModule } from '@fuse/shared.module';
+import { FuseHighlightModule } from '@fuse/components';
 
 import { FuseHelperClassesComponent } from './helper-classes.component';
 import { FuseHelperClassesPaddingMarginComponent } from './tabs/padding-margin/padding-margin.component';
@@ -15,15 +18,20 @@ const routes: Routes = [
 ];
 
 @NgModule({
-    imports     : [
-        FuseSharedModule,
-        RouterModule.forChild(routes)
-    ],
     declarations: [
         FuseHelperClassesComponent,
         FuseHelperClassesPaddingMarginComponent,
         FuseHelperClassesWidthHeightComponent
-    ]
+    ],
+    imports     : [
+        RouterModule.forChild(routes),
+
+        MatIconModule,
+        MatTabsModule,
+
+        FuseSharedModule,
+        FuseHighlightModule,
+    ],
 })
 export class UIHelperClassesModule
 {

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

@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
+import { MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatProgressSpinnerModule } from '@angular/material';
+
 import { FuseSharedModule } from '@fuse/shared.module';
 
 import { FuseIconsComponent } from './icons.component';
@@ -13,12 +15,19 @@ const routes: Routes = [
 ];
 
 @NgModule({
-    imports     : [
-        FuseSharedModule,
-        RouterModule.forChild(routes)
-    ],
     declarations: [
         FuseIconsComponent
+    ],
+    imports     : [
+        RouterModule.forChild(routes),
+
+        MatButtonModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatProgressSpinnerModule,
+
+        FuseSharedModule
     ]
 })
 export class UIIconsModule

src/app/main/content/ui/page-layouts/page-layouts.module.ts

@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
+import { MatButtonModule, MatIconModule, MatSidenavModule, MatTabsModule } from '@angular/material';
+
 import { FuseSharedModule } from '@fuse/shared.module';
 import { FuseDemoModule } from '@fuse/components/demo/demo.module';
 
@@ -104,11 +106,6 @@ const routes: Routes = [
 ];
 
 @NgModule({
-    imports     : [
-        FuseSharedModule,
-        RouterModule.forChild(routes),
-        FuseDemoModule
-    ],
     declarations: [
         FuseCardedFullWidthComponent,
         FuseCardedFullWidth2Component,
@@ -129,6 +126,17 @@ const routes: Routes = [
         FuseSimpleRightSidenav3Component,
         FuseTabbedComponent,
         FuseBlankComponent
+    ],
+    imports     : [
+        RouterModule.forChild(routes),
+
+        MatButtonModule,
+        MatIconModule,
+        MatSidenavModule,
+        MatTabsModule,
+
+        FuseSharedModule,
+        FuseDemoModule
     ]
 })
 export class UIPageLayoutsModule

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

@@ -1,7 +1,10 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
+import { MatIconModule, MatTabsModule } from '@angular/material';
+
 import { FuseSharedModule } from '@fuse/shared.module';
+import { FuseHighlightModule } from '@fuse/components';
 
 import { FuseTypographyComponent } from './typography.component';
 import { FuseTypographyHeadingsComponent } from './tabs/headings/headings.component';
@@ -17,16 +20,21 @@ const routes: Routes = [
 ];
 
 @NgModule({
-    imports     : [
-        FuseSharedModule,
-        RouterModule.forChild(routes)
-    ],
     declarations: [
         FuseTypographyComponent,
         FuseTypographyHeadingsComponent,
         FuseTypographyInlineTextElementsComponent,
         FuseTypographyBlockquotesListsComponent,
         FuseTypographyHelpersComponent
+    ],
+    imports     : [
+        RouterModule.forChild(routes),
+
+        MatIconModule,
+        MatTabsModule,
+
+        FuseSharedModule,
+        FuseHighlightModule
     ]
 })
 export class UITypographyModule