refactor(app): refactor forRoot & menu import

src/app/@core/core.module.ts

@@ -1,7 +1,12 @@
-import { NgModule, Optional, SkipSelf } from '@angular/core';
+import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { throwIfAlreadyLoaded } from './module-import-guard';
+import { DataModule } from './data/data.module';
+
+const NGA_CORE_PROVIDERS = [
+  ...DataModule.forRoot().providers,
+];
 
 @NgModule({
   imports: [
@@ -13,4 +18,13 @@ export class CoreModule {
   constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
     throwIfAlreadyLoaded(parentModule, 'CoreModule');
   }
+
+  static forRoot(): ModuleWithProviders {
+    return <ModuleWithProviders>{
+      ngModule: CoreModule,
+      providers: [
+        ...NGA_CORE_PROVIDERS,
+      ],
+    };
+  }
 }

src/app/@theme/theme.module.ts

@@ -1,8 +1,9 @@
-import { NgModule } from '@angular/core';
+import { ModuleWithProviders, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import {
+  NgaThemeModule,
   NgaCardModule,
   NgaLayoutModule,
   NgaTabsetModule,
@@ -45,6 +46,7 @@ const NGA_MODULES = [
   NgaUserModule,
   NgaActionsModule,
   NgaSearchModule,
+  NgaSidebarModule,
 ];
 
 const COMPONENTS = [
@@ -61,11 +63,17 @@ const PIPES = [
   RoundPipe,
 ];
 
+const NGA_THEME_PROVIDERS = [
+  ...NgaThemeModule.forRoot({ name: 'cosmic' }).providers,
+  ...NgaSidebarModule.forRoot().providers,
+  ...NgaSidebarModule.forRoot().providers,
+  ...NgaMenuModule.forRoot().providers,
+];
+
 @NgModule({
   imports: [
     ...BASE_MODULES,
     ...NGA_MODULES,
-    NgaSidebarModule.forRoot(),
   ],
   exports: [
     ...BASE_MODULES,
@@ -79,4 +87,13 @@ const PIPES = [
   ],
 })
 export class ThemeModule {
+
+  static forRoot(): ModuleWithProviders {
+    return <ModuleWithProviders>{
+      ngModule: ThemeModule,
+      providers: [
+        ...NGA_THEME_PROVIDERS,
+      ],
+    };
+  }
 }

src/app/app.module.ts

@@ -13,6 +13,7 @@ import { CoreModule } from './@core/core.module';
 
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
+import { ThemeModule } from './@theme/theme.module';
 
 @NgModule({
   declarations: [AppComponent],
@@ -22,6 +23,8 @@ import { AppRoutingModule } from './app-routing.module';
     HttpModule,
     AppRoutingModule,
     CoreModule,
+    ThemeModule.forRoot(),
+    CoreModule.forRoot(),
   ],
   bootstrap: [AppComponent],
   providers: [

src/app/pages/pages-menu.ts

@@ -2,102 +2,134 @@ import { NgaMenuItem } from '@akveo/nga-theme';
 
 import { List } from 'immutable';
 
-// TODO: refactor array styles
+export const MENU_ITEMS: List<NgaMenuItem> = List([
-export const menuItems: List<NgaMenuItem> = List([{
+  {
-  title: 'Dashboard',
+    title: 'Dashboard',
-  icon: 'ion ion-ios-home-outline',
+    icon: 'ion ion-ios-home-outline',
-  link: '/pages/dashboard',
+    link: '/pages/dashboard',
-  home: true,
+    home: true,
-}, {
-  title: 'FEATURES',
-  group: true,
-}, {
-  title: 'UI Features',
-  icon: 'ion ion-ios-keypad-outline',
-  link: '/pages/ui-features',
-  children: List<NgaMenuItem>([{
-    title: 'Buttons',
-    link: '/pages/ui-features/buttons',
-  }, {
-    title: 'Grid',
-    link: '/pages/ui-features/grid',
-  }, {
-    title: 'Icons',
-    link: '/pages/ui-features/icons',
-  }, {
-    title: 'Modals',
-    link: '/pages/ui-features/modals',
-  }, {
-    title: 'Typography',
-    link: '/pages/ui-features/typography',
-  }, {
-    title: 'Animated Searches',
-    link: '/pages/ui-features/search-fields',
   },
   {
-    title: 'Tabs',
+    title: 'FEATURES',
-    link: '/pages/ui-features/tabs',
+    group: true,
-  }]),
+  },
-}, {
+  {
-  title: 'Components',
+    title: 'UI Features',
-  icon: 'ion ion-ios-gear-outline',
+    icon: 'ion ion-ios-keypad-outline',
-  children: List<NgaMenuItem>([
+    link: '/pages/ui-features',
-    {
+    children: List<NgaMenuItem>([
-      title: 'Tree',
+      {
-      link: '/pages/components/tree',
+        title: 'Buttons',
-    }, {
+        link: '/pages/ui-features/buttons',
-      title: 'Toaster',
+      },
-      link: '/pages/components/toaster',
+      {
-    },
+        title: 'Grid',
-  ]),
+        link: '/pages/ui-features/grid',
-}, {
+      },
-  title: 'Maps',
+      {
-  icon: 'ion ion-ios-location-outline',
+        title: 'Icons',
-  children: List<NgaMenuItem>([{
+        link: '/pages/ui-features/icons',
-    title: 'Gmaps',
+      },
-    link: '/pages/maps/gmaps',
+      {
-  }, {
+        title: 'Modals',
-    title: 'Leaflet',
+        link: '/pages/ui-features/modals',
-    link: '/pages/maps/leaflet',
+      },
-  }]),
+      {
-}, {
+        title: 'Typography',
-  title: 'Charts',
+        link: '/pages/ui-features/typography',
-  icon: 'ion ion-arrow-graph-up-right',
+      },
-  children: List<NgaMenuItem>([{
+      {
-    title: 'Echarts',
+        title: 'Animated Searches',
-    link: '/pages/charts/echarts',
+        link: '/pages/ui-features/search-fields',
-  }, {
+      },
-    title: 'D3',
+      {
-    link: '/pages/charts/d3',
+        title: 'Tabs',
-  }, {
+        link: '/pages/ui-features/tabs',
-    title: 'Charts.js',
+      },
-    link: '/pages/charts/chartjs',
+    ]),
-  }]),
+  },
-}, {
+  {
-  title: 'Editors',
+    title: 'Components',
-  icon: 'ion ion-edit',
+    icon: 'ion ion-ios-gear-outline',
-  children: List<NgaMenuItem>([{
+    children: List<NgaMenuItem>([
-    title: 'TinyMCE',
+      {
-    link: '/pages/editors/tinymce',
+        title: 'Tree',
-  }, {
+        link: '/pages/components/tree',
-    title: 'CKEditor',
+      }, {
-    link: '/pages/editors/ckeditor',
+        title: 'Toaster',
-  }]),
+        link: '/pages/components/toaster',
-}, {
+      },
-  title: 'Forms',
+    ]),
-  icon: 'ion-compose',
+  },
-  children: List<NgaMenuItem>([{
+  {
-    title: 'Form Inputs',
+    title: 'Maps',
-    link: '/pages/forms/inputs',
+    icon: 'ion ion-ios-location-outline',
-  }, {
+    children: List<NgaMenuItem>([
-    title: 'Form Layouts',
+      {
-    link: '/pages/forms/layouts',
+        title: 'Gmaps',
-  }]),
+        link: '/pages/maps/gmaps',
-}, {
+      },
-  title: 'Tables',
+      {
-  icon: 'ion-ios-grid-view',
+        title: 'Leaflet',
-  children: List<NgaMenuItem>([{
+        link: '/pages/maps/leaflet',
-    title: 'Smart Table',
+      },
-    link: '/pages/tables/smart-table',
+    ]),
-  }]),
+  },
-}]);
+  {
+    title: 'Charts',
+    icon: 'ion ion-arrow-graph-up-right',
+    children: List<NgaMenuItem>([
+      {
+        title: 'Echarts',
+        link: '/pages/charts/echarts',
+      },
+      {
+        title: 'D3',
+        link: '/pages/charts/d3',
+      },
+      {
+        title: 'Charts.js',
+        link: '/pages/charts/chartjs',
+      },
+    ]),
+  },
+  {
+    title: 'Editors',
+    icon: 'ion ion-edit',
+    children: List<NgaMenuItem>([
+      {
+        title: 'TinyMCE',
+        link: '/pages/editors/tinymce',
+      },
+      {
+        title: 'CKEditor',
+        link: '/pages/editors/ckeditor',
+      },
+    ]),
+  },
+  {
+    title: 'Forms',
+    icon: 'ion-compose',
+    children: List<NgaMenuItem>([
+      {
+        title: 'Form Inputs',
+        link: '/pages/forms/inputs',
+      },
+
+      {
+        title: 'Form Layouts',
+        link: '/pages/forms/layouts',
+      },
+    ]),
+  },
+  {
+    title: 'Tables',
+    icon: 'ion-ios-grid-view',
+    children: List<NgaMenuItem>([
+      {
+        title: 'Smart Table',
+        link: '/pages/tables/smart-table',
+      },
+    ]),
+  },
+]);

src/app/pages/pages.component.ts

@@ -1,15 +1,18 @@
 import { Component } from '@angular/core';
 
 import 'style-loader!../@theme/styles/styles.scss';
+import { MENU_ITEMS } from './pages-menu';
 
 @Component({
   selector: 'ngx-pages',
   template: `
     <ngx-one-column-layout>
-      <nga-menu></nga-menu>
+      <nga-menu [items]="menu"></nga-menu>
       <router-outlet></router-outlet>
     </ngx-one-column-layout>
   `,
 })
 export class PagesComponent {
+
+  menu = MENU_ITEMS;
 }

src/app/pages/pages.module.ts

@@ -1,14 +1,9 @@
 import { NgModule } from '@angular/core';
 
-import { NgaMenuModule, NgaSidebarModule, NgaThemeModule } from '@akveo/nga-theme';
-
-import { menuItems } from './pages-menu';
-
 import { PagesComponent } from './pages.component';
 import { DashboardModule } from './dashboard/dashboard.module';
 import { PagesRoutingModule } from './pages-routing.module';
 import { ThemeModule } from '../@theme/theme.module';
-import { DataModule } from '../@core/data/data.module';
 
 const PAGES_COMPONENTS = [
   PagesComponent,
@@ -16,13 +11,8 @@ const PAGES_COMPONENTS = [
 
 @NgModule({
   imports: [
-    // TODO: why here? review the modules structure
-    NgaThemeModule.forRoot({ name: 'cosmic' }),
-    NgaSidebarModule.forRoot(),
-    NgaMenuModule.forRoot({ items: menuItems }),
     PagesRoutingModule,
     ThemeModule,
-    DataModule.forRoot(),
     DashboardModule,
   ],
   declarations: [