feat(angular 8): improve material imports and load child with the new version

Author: Ismael Ramos

package-lock.json

@@ -103,7 +103,6 @@
     "ng-bullet": "1.0.3",
     "ng-mocks": "8.0.0",
     "ng-packagr": "5.3.0",
-    "node-sass": "4.12.0",
     "path": "0.12.7",
     "protractor": "5.4.2",
     "standard-version": "6.0.1",

package.json

@@ -8,9 +8,8 @@ const routesNames = RoutesConfig.routesNames;
 
 const routes: Routes = [
   {path: routesNames.home, component: HomePageComponent, pathMatch: 'full'},
-  {path: routesNames.heroes.basePath, loadChildren: './modules/heroes/heroes.module#HeroesModule'},
+  {path: routesNames.heroes.basePath, loadChildren: () => import('./modules/heroes/heroes.module').then(m => m.HeroesModule)},
   {path: routesNames.error404, component: Error404PageComponent},
-
   {path: 'en', redirectTo: ''}, // because english language is the default one
 
   // otherwise redirect to 404

src/app/app-routing.module.ts

@@ -10,9 +10,9 @@ import {NgxExampleLibraryComponent} from '@ismaestro/ngx-example-library';
 import {of} from 'rxjs';
 import {MockComponent} from 'ng-mocks';
 import {RouterTestingModule} from '@angular/router/testing';
-import {MatSnackBar} from '@angular/material';
 import {I18n} from '@ngx-translate/i18n-polyfill';
 import {TRANSLATIONS, TRANSLATIONS_FORMAT} from '@angular/core';
+import {MatSnackBar} from '@angular/material/snack-bar';
 
 describe('AppComponent', () => {
   let component: AppComponent;

src/app/app.component.spec.ts

@@ -1,7 +1,7 @@
 import {Component, Inject, LOCALE_ID, OnInit, PLATFORM_ID, Renderer2} from '@angular/core';
 import {Meta, Title} from '@angular/platform-browser';
 import {NavigationEnd, Router} from '@angular/router';
-import {MatSnackBar} from '@angular/material';
+import {MatSnackBar} from '@angular/material/snack-bar';
 import {UtilsHelperService} from './shared/services/utils-helper.service';
 import {DOCUMENT, isPlatformBrowser} from '@angular/common';
 import {I18n} from '@ngx-translate/i18n-polyfill';

src/app/app.component.ts

@@ -2,7 +2,7 @@ import {HeroRemoveComponent} from './hero-remove.component';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {configureTestSuite} from 'ng-bullet';
 import {MockModule} from 'ng-mocks';
-import {MatDialogModule} from '@angular/material';
+import {MatDialogModule} from '@angular/material/dialog';
 
 describe('HeroRemoveComponent', () => {
   let component: HeroRemoveComponent;

src/app/modules/heroes/components/hero-remove/hero-remove.component.spec.ts

@@ -6,7 +6,7 @@ import {HeroLoadingComponent} from '../../../../shared/components/hero-loading/h
 import {HeroCardComponent} from '../../../../shared/components/hero-card/hero-card.component';
 import {MockComponent, MockModule} from 'ng-mocks';
 import {FirebaseModule} from '../../../../shared/modules/firebase.module';
-import {MatSnackBar} from '@angular/material';
+import {MatSnackBar} from '@angular/material/snack-bar';
 import {TRANSLATIONS, TRANSLATIONS_FORMAT} from '@angular/core';
 import {I18n} from '@ngx-translate/i18n-polyfill';
 import {HeroService} from '../../shared/hero.service';

src/app/modules/heroes/pages/hero-detail-page/hero-detail-page.component.spec.ts

@@ -10,7 +10,12 @@ import {HeroRemoveComponent} from '../../components/hero-remove/hero-remove.comp
 import {Router} from '@angular/router';
 import {APP_CONFIG, AppConfig} from '../../../../configs/app.config';
 import {MockComponent, MockModule} from 'ng-mocks';
-import {MatDialog, MatError, MatFormField, MatIcon, MatList, MatListItem, MatSnackBar} from '@angular/material';
+import {MatDialog} from '@angular/material/dialog';
+import {MatError} from '@angular/material/typings';
+import {MatFormField} from '@angular/material/form-field';
+import {MatIcon} from '@angular/material/icon';
+import {MatList, MatListItem} from '@angular/material/list';
+import {MatSnackBar} from '@angular/material/snack-bar';
 import {NgxScrollToFirstInvalidModule} from '@ismaestro/ngx-scroll-to-first-invalid';
 import {RouterTestingModule} from '@angular/router/testing';
 import {TRANSLATIONS, TRANSLATIONS_FORMAT} from '@angular/core';

src/app/modules/heroes/pages/heroes-list-page/heroes-list-page.component.spec.ts

@@ -2,7 +2,8 @@ import {Component, Inject, OnInit, ViewChild} from '@angular/core';
 import {Hero} from '../../shared/hero.model';
 import {HeroService} from '../../shared/hero.service';
 import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
-import {MatDialog, MatSnackBar} from '@angular/material';
+import {MatDialog} from '@angular/material/dialog';
+import {MatSnackBar} from '@angular/material/snack-bar';
 import {Router} from '@angular/router';
 import {UtilsHelperService} from '../../../../shared/services/utils-helper.service';
 import {HeroRemoveComponent} from '../../components/hero-remove/hero-remove.component';

src/app/modules/heroes/pages/heroes-list-page/heroes-list-page.component.ts

@@ -4,7 +4,7 @@ import {Hero} from './hero.model';
 import {HttpErrorResponse} from '@angular/common/http';
 import {configureTestSuite} from 'ng-bullet';
 import {FirebaseModule} from '../../../shared/modules/firebase.module';
-import {MatSnackBar} from '@angular/material';
+import {MatSnackBar} from '@angular/material/snack-bar';
 import {TRANSLATIONS, TRANSLATIONS_FORMAT} from '@angular/core';
 import {I18n} from '@ngx-translate/i18n-polyfill';
 import {CookieService} from 'ngx-cookie';