feat(core): import modules needed for initial app layout to CoreModule

- do NOT use SharedModule for initial app layout (only for lazy modules)
- improve initial bundle size

projects/angular-ngrx-material-starter/src/app/app.module.ts

@@ -2,7 +2,6 @@ import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule } from '@angular/core';
 
-import { SharedModule } from './shared/shared.module';
 import { CoreModule } from './core/core.module';
 
 import { AppRoutingModule } from './app-routing.module';
@@ -14,9 +13,8 @@ import { AppComponent } from './app/app.component';
     BrowserAnimationsModule,
     BrowserModule,
 
-    // core & shared
+    // core
     CoreModule,
-    SharedModule,
 
     // app
     AppRoutingModule

projects/angular-ngrx-material-starter/src/app/core/core.module.ts

@@ -14,6 +14,19 @@ import { EffectsModule } from '@ngrx/effects';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import {
+  FaIconLibrary,
+  FontAwesomeModule
+} from '@fortawesome/angular-fontawesome';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatListModule } from '@angular/material/list';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { FormsModule } from '@angular/forms';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
 
 import { environment } from '../../environments/environment';
 
@@ -45,6 +58,22 @@ import {
   selectEffectiveTheme,
   selectSettingsStickyHeader
 } from './settings/settings.selectors';
+import { MatButtonModule } from '@angular/material/button';
+import {
+  faCog,
+  faBars,
+  faRocket,
+  faPowerOff,
+  faUserCircle,
+  faPlayCircle
+} from '@fortawesome/free-solid-svg-icons';
+import {
+  faGithub,
+  faMediumM,
+  faTwitter,
+  faInstagram,
+  faYoutube
+} from '@fortawesome/free-brands-svg-icons';
 
 export {
   TitleService,
@@ -78,6 +107,18 @@ export function HttpLoaderFactory(http: HttpClient) {
     // angular
     CommonModule,
     HttpClientModule,
+    FormsModule,
+
+    // material
+    MatSidenavModule,
+    MatToolbarModule,
+    MatListModule,
+    MatMenuModule,
+    MatIconModule,
+    MatSelectModule,
+    MatTooltipModule,
+    MatSnackBarModule,
+    MatButtonModule,
 
     // ngrx
     StoreModule.forRoot(reducers, { metaReducers }),
@@ -94,6 +135,7 @@ export function HttpLoaderFactory(http: HttpClient) {
         }),
 
     // 3rd party
+    FontAwesomeModule,
     TranslateModule.forRoot({
       loader: {
         provide: TranslateLoader,
@@ -108,16 +150,48 @@ export function HttpLoaderFactory(http: HttpClient) {
     { provide: ErrorHandler, useClass: AppErrorHandler },
     { provide: RouterStateSerializer, useClass: CustomSerializer }
   ],
-  exports: [TranslateModule]
+  exports: [
+    // angular
+    FormsModule,
+
+    // material
+    MatSidenavModule,
+    MatToolbarModule,
+    MatListModule,
+    MatMenuModule,
+    MatIconModule,
+    MatSelectModule,
+    MatTooltipModule,
+    MatSnackBarModule,
+    MatButtonModule,
+
+    // 3rd party
+    FontAwesomeModule,
+    TranslateModule
+  ]
 })
 export class CoreModule {
   constructor(
     @Optional()
     @SkipSelf()
-    parentModule: CoreModule
+    parentModule: CoreModule,
+    faIconLibrary: FaIconLibrary
   ) {
     if (parentModule) {
       throw new Error('CoreModule is already loaded. Import only in AppModule');
     }
+    faIconLibrary.addIcons(
+      faCog,
+      faBars,
+      faRocket,
+      faPowerOff,
+      faUserCircle,
+      faPlayCircle,
+      faGithub,
+      faMediumM,
+      faTwitter,
+      faInstagram,
+      faYoutube
+    );
   }
 }

projects/angular-ngrx-material-starter/src/app/shared/shared.module.ts

@@ -1,18 +1,15 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-
 import { TranslateModule } from '@ngx-translate/core';
 
 import { MatButtonModule } from '@angular/material/button';
-import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatSelectModule } from '@angular/material/select';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatInputModule } from '@angular/material/input';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatChipsModule } from '@angular/material/chips';
-import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatCardModule } from '@angular/material/card';
 import { MatListModule } from '@angular/material/list';
@@ -21,57 +18,15 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatDividerModule } from '@angular/material/divider';
-import { MatSliderModule } from '@angular/material/';
+import { MatSliderModule } from '@angular/material/slider';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatNativeDateModule } from '@angular/material';
+import { MatNativeDateModule } from '@angular/material/core';
 
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { library } from '@fortawesome/fontawesome-svg-core';
 import {
-  faBars,
-  faUserCircle,
-  faPowerOff,
-  faCog,
-  faPlayCircle,
-  faRocket,
-  faPlus,
-  faEdit,
-  faTrash,
-  faTimes,
-  faCaretUp,
-  faCaretDown,
-  faExclamationTriangle,
-  faFilter,
-  faTasks,
-  faCheck,
-  faSquare,
-  faLanguage,
-  faPaintBrush,
-  faLightbulb,
-  faWindowMaximize,
-  faStream,
-  faBook
-} from '@fortawesome/free-solid-svg-icons';
+  FontAwesomeModule,
+  FaIconLibrary
+} from '@fortawesome/angular-fontawesome';
 import {
-  faGithub,
-  faMediumM,
-  faTwitter,
-  faInstagram,
-  faYoutube
-} from '@fortawesome/free-brands-svg-icons';
-
-library.add(
-  faBars,
-  faUserCircle,
-  faPowerOff,
-  faCog,
-  faRocket,
-  faPlayCircle,
-  faGithub,
-  faMediumM,
-  faTwitter,
-  faInstagram,
-  faYoutube,
   faPlus,
   faEdit,
   faTrash,
@@ -89,7 +44,8 @@ library.add(
   faWindowMaximize,
   faStream,
   faBook
-);
+} from '@fortawesome/free-solid-svg-icons';
+import { faMediumM, faGithub } from '@fortawesome/free-brands-svg-icons';
 
 import { BigInputComponent } from './big-input/big-input/big-input.component';
 import { BigInputActionComponent } from './big-input/big-input-action/big-input-action.component';
@@ -103,14 +59,12 @@ import { RtlSupportDirective } from './rtl-support/rtl-support.directive';
     TranslateModule,
 
     MatButtonModule,
-    MatToolbarModule,
     MatSelectModule,
     MatTabsModule,
     MatInputModule,
     MatProgressSpinnerModule,
     MatChipsModule,
     MatCardModule,
-    MatSidenavModule,
     MatCheckboxModule,
     MatListModule,
     MatMenuModule,
@@ -142,10 +96,8 @@ import { RtlSupportDirective } from './rtl-support/rtl-support.directive';
     MatProgressSpinnerModule,
     MatCheckboxModule,
     MatCardModule,
-    MatSidenavModule,
     MatListModule,
     MatSelectModule,
-    MatToolbarModule,
     MatIconModule,
     MatTooltipModule,
     MatSnackBarModule,
@@ -162,4 +114,28 @@ import { RtlSupportDirective } from './rtl-support/rtl-support.directive';
     RtlSupportDirective
   ]
 })
-export class SharedModule {}
+export class SharedModule {
+  constructor(faIconLibrary: FaIconLibrary) {
+    faIconLibrary.addIcons(
+      faGithub,
+      faMediumM,
+      faPlus,
+      faEdit,
+      faTrash,
+      faTimes,
+      faCaretUp,
+      faCaretDown,
+      faExclamationTriangle,
+      faFilter,
+      faTasks,
+      faCheck,
+      faSquare,
+      faLanguage,
+      faPaintBrush,
+      faLightbulb,
+      faWindowMaximize,
+      faStream,
+      faBook
+    );
+  }
+}