feat(shared): split shared module for optimal loading

1. removed MaterialModule, 2. fixed 'escape form zone' issue for ngxs, 3. explicitly loading
required material modules

PLAYBOOK.md

@@ -9,9 +9,9 @@ Do-it-yourself step-by-step instructions to create this project structure from s
 | Software             | Version | Optional |
 | -------------------- | ------- | -------- |
 | Node                 | v11.4.0 |          |
-| NPM                  | v6.5.0  |          |
+| NPM                  | v6.6.0  |          |
 | Angular CLI          | v7.3.0  |          |
-| @nrwl/schematics     | v7.4.1  |          |
+| @nrwl/schematics     | v7.5.0  |          |
 | @nestjs/cli          | v5.7.1  |          |
 | semantic-release-cli | v4.1.0  |          |
 | commitizen           | v3.0.5  |          |
@@ -273,15 +273,10 @@ ng g service services/Feature        --project=core   -d
 ng g service services/GoogleAnalytics --project=core   -d
 ng g service  PushNotification        --project=core -d
 
-# `material` module to encapulate material libs which is impoted into any `Lazy-loaded Feature Modules` that need material components
-ng g lib material --prefix=ngx --spec=false --tags=shared-module --unit-test-runner=jest -d
-
 # add `shared` module which will encapsulate angular and 3rd party modules, needed for all `Lazy-loaded Feature Modules`
 ng g lib shared --prefix=ngx --tags=shared-module --unit-test-runner=jest
 # generate containers, components for `shared` Module
 ng g service containers/entity/entity --project=shared
-ng g directive directives/min  --project=shared  --export=true
-ng g directive components/ClickOutside  --project=shared  --export=true
 ng g component components/entityTable --project=shared  --export=true
 ng g component containers/entity --project=shared  --skip-import
 ng g component containers/entityForm  --project=shared  --skip-import
@@ -398,6 +393,10 @@ ng g pipe pipes/date-fns/FormatTimeInWords --project=ngx-utils --module=date-fns
 ng g module directives/inViewport --project=ngx-utils --spec=false -d
 ng g directive directives/in-viewport/inViewport  --selector=inViewport --project=ngx-utils --module=in-viewport --export -d
 ng g service directives/in-viewport/Viewport --project=ngx-utils --module=in-viewport -d
+ng g module directives/clickOutside --project=ngx-utils --spec=false -d
+ng g directive directives/click-outside/clickOutside  --selector=ngxClickOutside --project=ngx-utils --module=click-outside --export -d
+ng g module directives/min --project=ngx-utils --spec=false -d
+ng g directive directives/min/MinValidator  --selector=appMin --project=ngx-utils --module=min --export -d
 
 
 # generate components for `preload` Module
@@ -475,6 +474,7 @@ ng g component containers/knobDemo              --project=experiments -d
 ng g component containers/ledDemo               --project=experiments  -d
 ng g component containers/ImageComp             --project=experiments  -d
 ng g component containers/layout                --project=experiments -d
+ng g component containers/dashing               --project=experiments -d
 ng g component components/card                  --project=experiments -d
 ng g component containers/viewport              --project=experiments --spec=false -d
 

angular.json

@@ -561,29 +561,6 @@
         }
       }
     },
-    "material": {
-      "root": "libs/material",
-      "sourceRoot": "libs/material/src",
-      "projectType": "library",
-      "prefix": "ngx",
-      "architect": {
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": ["libs/material/tsconfig.lib.json", "libs/material/tsconfig.spec.json"],
-            "exclude": ["**/node_modules/**"]
-          }
-        },
-        "test": {
-          "builder": "@nrwl/builders:jest",
-          "options": {
-            "jestConfig": "libs/material/jest.config.js",
-            "tsConfig": "libs/material/tsconfig.spec.json",
-            "setupFile": "libs/material/src/test-setup.ts"
-          }
-        }
-      }
-    },
     "animations": {
       "root": "libs/animations",
       "sourceRoot": "libs/animations/src",

libs/admin/src/lib/admin.module.ts

@@ -1,32 +1,77 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
+import { FormlyModule } from '@ngx-formly/core';
+import { FormlyMaterialModule } from '@ngx-formly/material';
+
+import { AdminGuard } from '@ngx-starter-kit/auth';
 import { SharedModule } from '@ngx-starter-kit/shared';
 import { DragDropModule } from '@angular/cdk/drag-drop';
+import { ToolbarModule } from '@ngx-starter-kit/toolbar';
+import { QuickpanelModule } from '@ngx-starter-kit/quickpanel';
 import { AppConfirmModule } from '@ngx-starter-kit/app-confirm';
+import { BreadcrumbsModule } from '@ngx-starter-kit/breadcrumbs';
 import { HelperModule, TruncateModule } from '@ngx-starter-kit/ngx-utils';
+
 import { OverviewComponent } from './containers/overview/overview.component';
 import { SubscriptionsComponent } from './containers/subscriptions/subscriptions.component';
 import { SubscriptionDetailComponent } from './components/subscription-detail/subscription-detail.component';
 import { NotificationsComponent } from './containers/notifications/notifications.component';
 import { NotificationDetailComponent } from './components/notification-detail/notification-detail.component';
 import { NotificationEditComponent } from './components/notification-edit/notification-edit.component';
 import { AdminLayoutComponent } from './containers/admin-layout/admin-layout.component';
-import { ToolbarModule } from '@ngx-starter-kit/toolbar';
-import { QuickpanelModule } from '@ngx-starter-kit/quickpanel';
-import { AdminGuard } from '@ngx-starter-kit/auth';
-import { FormlyModule } from '@ngx-formly/core';
-import { FormlyMaterialModule } from '@ngx-formly/material';
+
+
+
+import {
+  MatButtonModule,
+  MatButtonToggleModule,
+  MatCardModule,
+  MatCheckboxModule,
+  MatDialogModule,
+  MatDividerModule,
+  MatFormFieldModule,
+  MatIconModule,
+  MatInputModule,
+  MatListModule,
+  MatMenuModule,
+  MatPaginatorModule,
+  MatProgressBarModule,
+  MatSidenavModule,
+  MatTableModule,
+  MatToolbarModule,
+} from '@angular/material';
+
+const matModules = [
+  MatCardModule,
+  MatButtonModule,
+  MatIconModule,
+  MatFormFieldModule,
+  MatInputModule,
+  MatButtonToggleModule,
+  MatMenuModule,
+  MatCheckboxModule,
+  MatToolbarModule,
+  MatProgressBarModule,
+  MatTableModule,
+  MatPaginatorModule,
+  MatDividerModule,
+  MatListModule,
+  MatDialogModule,
+  MatSidenavModule,
+  DragDropModule,
+];
 
 @NgModule({
   imports: [
     SharedModule,
-    DragDropModule,
+    BreadcrumbsModule,
+    [...matModules],
     AppConfirmModule,
     TruncateModule,
     HelperModule,
     ToolbarModule,
     QuickpanelModule,
-    FormlyModule.forRoot(),
+    FormlyModule.forChild({}),
     FormlyMaterialModule,
     RouterModule.forChild([
       /* {path: '', pathMatch: 'full', component: InsertYourComponentHere} */

libs/auth/src/lib/auth.module.ts

@@ -1,46 +1,51 @@
 import { APP_INITIALIZER, ModuleWithProviders, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
-import { JwksValidationHandler, OAuthModule, OAuthService, ValidationHandler } from '@xmlking/angular-oauth2-oidc-all';
 import { Store } from '@ngxs/store';
+import { JwksValidationHandler, OAuthModule, OAuthService, ValidationHandler } from '@xmlking/angular-oauth2-oidc-all';
+
+import { environment } from '@env/environment';
+import { ReactiveFormsModule } from '@angular/forms';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
-import { initializeAuth } from './oauth.init';
 import { AuthState } from './auth.state';
-import { LoginComponent } from './components/login/login.component';
+import { AuthGuard } from './auth.guard';
 import { ROPCService } from './ropc.service';
 import { AuthService } from './auth.service';
-import { AuthGuard } from './auth.guard';
+import { AuthHandler } from './auth.handler';
+import { initializeAuth } from './oauth.init';
+import { LoginComponent } from './components/login/login.component';
 
 import {
+  MatIconModule,
   MatButtonModule,
   MatCardModule,
   MatCheckboxModule,
   MatDialogModule,
-  MatFormFieldModule,
-  MatIconModule,
   MatInputModule,
+  MatFormFieldModule,
   MatToolbarModule,
   MatTooltipModule,
 } from '@angular/material';
-import { ReactiveFormsModule } from '@angular/forms';
-import { FlexLayoutModule } from '@angular/flex-layout';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { environment } from '@env/environment';
-import { AuthHandler } from './auth.handler';
+
+const matModules = [
+  MatIconModule,
+  MatButtonModule,
+  MatCardModule,
+  MatCheckboxModule,
+  MatDialogModule,
+  MatInputModule,
+  MatFormFieldModule,
+  MatTooltipModule,
+  MatToolbarModule,
+];
 
 @NgModule({
   imports: [
     CommonModule,
     RouterModule,
-    MatButtonModule,
-    MatCardModule,
-    MatCheckboxModule,
-    MatDialogModule,
-    MatFormFieldModule,
-    MatIconModule,
-    MatTooltipModule,
-    MatInputModule,
-    MatToolbarModule,
+    [...matModules],
     FlexLayoutModule,
     ReactiveFormsModule,
     FontAwesomeModule,

libs/auth/src/lib/auth.state.ts

@@ -107,14 +107,15 @@ export class AuthState {
 
   @Action(Login)
   login({ getState, dispatch }: StateContext<AuthStateModel>, { payload }: Login) {
-    return this.authService.login(payload).pipe(
+    // HINT: done escape form zone https://github.com/angular/material2/issues/13640
+    return this.zone.run( () => this.authService.login(payload).pipe(
       map(profile => {
         if (profile === false) {
           dispatch(new LoginCanceled());
         } else {
           dispatch(new LoginSuccess(profile));
         }
       }),
-    );
+    ));
   }
 }

libs/auth/src/lib/components/login/login.component.ts

@@ -1,11 +1,11 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, OnInit } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, Component, Inject } from '@angular/core';
+import { HttpErrorResponse } from '@angular/common/http';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { ROPCService } from '../../ropc.service';
-import { Router } from '@angular/router';
+import { Store } from '@ngxs/store';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
-import { HttpErrorResponse } from '@angular/common/http';
 import { OAuthService } from '@xmlking/angular-oauth2-oidc-all';
-import { Store } from '@ngxs/store';
+
+import { ROPCService } from '../../ropc.service';
 import { ChangeAuthMode, AuthMode } from '../../auth.actions';
 
 /** @dynamic */
@@ -27,7 +27,6 @@ export class LoginComponent {
     private cd: ChangeDetectorRef,
     private oauthService: OAuthService,
     private ropcService: ROPCService,
-    private router: Router,
     @Inject(MAT_DIALOG_DATA) public data: { infoMsg: string },
     public dialogRef: MatDialogRef<LoginComponent>,
   ) {

libs/core/src/lib/core.module.ts

@@ -4,7 +4,7 @@ import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
 import { FormlyModule } from '@ngx-formly/core';
 import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { NgxPageScrollModule } from 'ngx-page-scroll';
+import { NgxPageScrollCoreModule } from 'ngx-page-scroll-core';
 import { NgxsModule } from '@ngxs/store';
 import { NgxsFormPluginModule } from '@ngxs/form-plugin';
 import { NgxsStoragePluginModule } from '@ngxs/storage-plugin';
@@ -54,7 +54,7 @@ library.add(faTwitter, faGithub, faGoogle);
     HttpClientModule,
     FontAwesomeModule,
     MatSnackBarModule,
-    NgxPageScrollModule,
+    NgxPageScrollCoreModule.forRoot({_logLevel: 3}),
     NavigatorModule.forRoot(defaultMenu),
     NgxsModule.forRoot([AuthState, MenuState, PreferenceState, AppState], { developmentMode: !environment.production }),
     NgxsStoragePluginModule.forRoot({

libs/dashboard/src/lib/dashboard.module.ts

@@ -1,9 +1,10 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { SharedModule } from '@ngx-starter-kit/shared';
 
 import { AuthGuard } from '@ngx-starter-kit/auth';
 import { ChatBoxModule } from '@ngx-starter-kit/chat-box';
+import { SharedModule } from '@ngx-starter-kit/shared';
+import { BreadcrumbsModule } from '@ngx-starter-kit/breadcrumbs';
 
 import { DashboardLayoutComponent } from './containers/dashboard-layout/dashboard-layout.component';
 import { OverviewComponent } from './containers/overview/overview.component';
@@ -15,9 +16,32 @@ import { SidenavModule } from '@ngx-starter-kit/sidenav';
 import { environment } from '@env/environment';
 import { ProfileComponent } from './containers/profile/profile.component';
 
+import {
+  MatCardModule,
+  MatDividerModule,
+  MatIconModule,
+  MatListModule,
+  MatRadioModule,
+  MatSidenavModule,
+  MatSlideToggleModule,
+} from '@angular/material';
+
+
+const matModules = [
+  MatSidenavModule,
+  MatCardModule,
+  MatIconModule,
+  MatDividerModule,
+  MatListModule,
+  MatRadioModule,
+  MatSlideToggleModule,
+];
+
 @NgModule({
   imports: [
     SharedModule,
+    BreadcrumbsModule,
+    [...matModules],
     SidenavModule,
     ToolbarModule,
     QuickpanelModule,

libs/experiments/src/lib/containers/dashing/dashing.component.html

@@ -0,0 +1,16 @@
+<div class="grid-container" style="height: 615px; overflow: hidden;">
+  <mat-grid-list cols="8" rowHeight="1:1" gutterSize="15px">
+    <mat-grid-tile *ngFor="let card of cards; let i = index;"
+                   [colspan]="card.cols" [rowspan]="card.rows">
+      <cdk-drop-list [cdkDropListConnectedTo]="drops" [cdkDropListData]="i" >
+        <mat-card cdkDrag (cdkDragEntered)="entered($event)" [cdkDragData]="i"
+                  class="dashboard-card"  [style.backgroundColor]="card.color">
+          <mat-icon cdkDragHandle class="more-button">drag_handle</mat-icon>
+          <mat-card-content class="dashboard-card-content">
+            <h1>{{card.title}}</h1>
+          </mat-card-content>
+        </mat-card>
+      </cdk-drop-list>
+    </mat-grid-tile>
+  </mat-grid-list>
+</div>

libs/experiments/src/lib/containers/dashing/dashing.component.scss

@@ -0,0 +1,39 @@
+.grid-container {
+  margin: 10px;
+}
+
+.dashboard-card {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+}
+
+.more-button {
+  float: right;
+  font-size: 2em;
+}
+
+.dashboard-card-content {
+  text-align: center;
+}
+
+.cdk-drop-list {
+  height: 100%;
+  width: 100%;
+}
+
+
+.cdk-drag-preview {
+  box-sizing: border-box;
+  opacity: 0.5;
+}
+
+.cdk-drag-animating {
+  transition: unset;
+}
+
+.cdk-drag-placeholder {
+  display: none;
+}