feat(): support for Angular 8

package.json

@@ -3,8 +3,8 @@
   "version": "2.7.8",
   "license": "MIT",
   "scripts": {
-    "start": "ng serve --port 1111 --source-map=false",
-    "hmr": "ng serve --port 1111 --hmr --source-map=false",
+    "start": "ng serve --port 1111",
+    "hmr": "ng serve --port 1111 --hmr",
     "build": "yarn build:browser && yarn build:server && prerender && yarn sw:update",
     "build:browser": "ng build alyle-ui --prod",
     "build:server": "ng run alyle-ui:server",
@@ -33,40 +33,36 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^7.2.12",
-    "@angular/common": "^7.2.12",
-    "@angular/compiler": "^7.2.12",
-    "@angular/core": "^7.2.12",
-    "@angular/forms": "^7.2.12",
-    "@angular/platform-browser": "^7.2.12",
-    "@angular/platform-browser-dynamic": "^7.2.12",
-    "@angular/platform-server": "^7.2.12",
-    "@angular/router": "^7.2.12",
-    "@angular/service-worker": "^7.2.12",
-    "@nguniversal/express-engine": "^7.0.2",
-    "@nguniversal/module-map-ngfactory-loader": "^7.0.2",
+    "@angular/animations": "^8.0.1",
+    "@angular/common": "^8.0.1",
+    "@angular/compiler": "^8.0.1",
+    "@angular/core": "^8.0.1",
+    "@angular/forms": "^8.0.1",
+    "@angular/platform-browser": "^8.0.1",
+    "@angular/platform-browser-dynamic": "^8.0.1",
+    "@angular/platform-server": "^8.0.1",
+    "@angular/router": "^8.0.1",
+    "@angular/service-worker": "^8.0.1",
+    "@nguniversal/express-engine": "^7.1.1",
+    "@nguniversal/module-map-ngfactory-loader": "^7.1.1",
     "chroma-js": "^2.0.2",
-    "core-js": "^2.5.7",
+    "core-js": "^2.6.1",
     "express": "^4.16.3",
     "hammerjs": "^2.0.8",
     "moment": "^2.22.2",
     "prismjs": "^1.16.0",
-    "rxjs": "6.3.3",
-    "tsickle": "0.34.0",
-    "tslib": "^1.9.3",
-    "zone.js": "^0.8.26"
+    "rxjs": "^6.4.0",
+    "tsickle": "^0.35.0",
+    "tslib": "^1.10.0",
+    "zone.js": "^0.9.1"
   },
   "devDependencies": {
     "@alyle/angular-prerender": "^0.4.1",
-    "@angular-builders/custom-webpack": "^7.4.3",
-    "@angular-builders/dev-server": "^7.3.1",
-    "@angular-devkit/build-angular": "^0.12.1",
-    "@angular-devkit/build-ng-packagr": "^0.13.8",
-    "@angular-devkit/core": "^7.3.7",
-    "@angular-devkit/schematics": "^7.3.7",
-    "@angular/cli": "^7.3.8",
-    "@angular/compiler-cli": "^7.2.12",
-    "@angular/http": "^7.2.12",
+    "@angular-builders/custom-webpack": "^8.0.2",
+    "@angular-devkit/build-angular": "^0.800.3",
+    "@angular-devkit/build-ng-packagr": "^0.800.3",
+    "@angular/cli": "^8.0.3",
+    "@angular/compiler-cli": "^8.0.1",
     "@angularclass/hmr": "^2.1.3",
     "@types/chroma-js": "^1.4.1",
     "@types/google.analytics": "^0.0.38",
@@ -80,7 +76,7 @@
     "bundlesize": "^0.17.0",
     "camelcase": "^5.0.0",
     "chalk": "^2.4.1",
-    "codelyzer": "^4.5.0",
+    "codelyzer": "^5.0.0",
     "conventional-changelog-cli": "^2.0.5",
     "firebase-tools": "^5.1.1",
     "fs-extra": "^6.0.0",
@@ -93,15 +89,15 @@
     "karma-jasmine": "^1.1.2",
     "karma-jasmine-html-reporter": "^0.2.2",
     "karma-mocha-reporter": "^2.2.5",
-    "ng-packagr": "^5.0.1",
+    "ng-packagr": "^5.3.0",
     "protractor": "~5.4.0",
     "replace-in-file": "^3.4.2",
     "showdown": "^1.9.0",
     "ts-node": "~5.0.1",
     "tslint": "^5.13.1",
     "typedoc": "^0.14.2",
-    "typescript": "3.2.2",
+    "typescript": "~3.4",
     "yargs": "^13.2.2"
   },
   "schematics": "./dist/@alyle/ui/schematics/collection.json"
-}
+}

src/app/app.component.ts

@@ -297,10 +297,10 @@ export class AppComponent implements OnInit {
   routes = AUIRoutes.slice(1);
   currentRoutePath: string;
 
-  @ViewChild(LyDrawer) drawer: LyDrawer;
-  @ViewChild(LySnackBar) sb: LySnackBar;
-  @ViewChild(TitleComponent) titleComponent: TitleComponent;
-  @ViewChild(PageContentComponent) page: PageContentComponent;
+  @ViewChild(LyDrawer, { static: true }) drawer: LyDrawer;
+  @ViewChild(LySnackBar, { static: false }) sb: LySnackBar;
+  @ViewChild(TitleComponent, { static: true }) titleComponent: TitleComponent;
+  @ViewChild(PageContentComponent, { static: true }) page: PageContentComponent;
 
   constructor(
     private _el: ElementRef,

src/app/app.module.ts

@@ -21,13 +21,11 @@ import { LyIconModule } from '@alyle/ui/icon';
 import { MinimaLight, MinimaDark } from '@alyle/ui/themes/minima';
 import { TitleComponent } from './document/title/title.component';
 import { DemoViewModule } from './demo-view';
-import { InstallationComponent } from '@docs/getting-started/installation/installation.component';
-import { CardDemoComponent } from '@docs/components/card-demo/card-demo.component';
-import { CardDemoBasicModule } from '@docs/components/card-demo/card-demo-basic/card-demo-basic.module';
+import { InstallationComponent } from './docs/getting-started/installation/installation.component';
+import { CardDemoComponent } from './docs/components/card-demo/card-demo.component';
+import { CardDemoBasicModule } from './docs/components/card-demo/card-demo-basic/card-demo-basic.module';
 import { LyTypographyModule } from '@alyle/ui/typography';
-import { MultipleThemesComponent } from './components/multiple-themes/multiple-themes.component';
-import { MultipleThemesDemo01Module } from './components/multiple-themes/multiple-themes-demo-01/multiple-themes-demo-01.module';
-import { DocsModule } from '@docs/docs.module';
+import { DocsModule } from './docs/docs.module';
 import { LyTabsModule } from '@alyle/ui/tabs';
 import { ApiComponent } from './api/api.component';
 import { LyCardModule } from '@alyle/ui/card';
@@ -37,6 +35,8 @@ import { PageContentComponent } from './page-content/page-content.component';
 import { LySnackBarModule } from '@alyle/ui/snack-bar';
 import { LyTooltipModule } from '@alyle/ui/tooltip';
 import { LyGridModule } from '@alyle/ui/grid';
+import { RouterModule } from '@angular/router';
+import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
 
 const Quepal = {
   default: `linear-gradient(135deg,#11998e 0%,#38ef7d 100%)`,
@@ -125,24 +125,23 @@ export function themeNameProviderFactory() {
     AppBarComponent,
     ApiComponent,
     TitleComponent,
-    /** Customization */
-    MultipleThemesComponent,
     /** Getting started */
     InstallationComponent,
     /** Components */
     CardDemoComponent,
     /** Pages */
-    HomeComponent
+    HomeComponent,
+    PageNotFoundComponent
   ],
   imports: [
     BrowserModule.withServerTransition({appId: '@alyle/ui'}),
     /** Customization */
-    /** MultipleThemes >*/MultipleThemesDemo01Module,
     /** CardDemo > */CardDemoBasicModule,
     CommonModule,
     FormsModule,
     HttpClientModule,
     BrowserAnimationsModule,
+    RouterModule,
     // LyThemeModule.setTheme('minima-light'),
     ResponsiveModule,
     LyCommonModule,

src/app/app.routing.ts

@@ -1,24 +1,14 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { HomeComponent } from './home/home.component';
-import { CardDemoComponent } from '@docs/components/card-demo/card-demo.component';
-import { TypographyDemoComponent } from '@docs/components/typography-demo/typography-demo.component';
-import { MultipleThemesComponent } from './components/multiple-themes/multiple-themes.component';
-import { ThemingComponent } from '@docs/customization/theming/theming.component';
+import { CardDemoComponent } from './docs/components/card-demo/card-demo.component';
+import { TypographyDemoComponent } from './docs/components/typography-demo/typography-demo.component';
 import { ApiComponent } from './api/api.component';
-import { PageNotFoundComponent } from '@docs/page-not-found/page-not-found.component';
+import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
 
 const routes: Routes = [
   /** Pages */
   { path: '', component: HomeComponent },
-  /** Customization */
-  { path: 'customization/multiple-themes', component: MultipleThemesComponent },
-  {
-    path: 'customization',
-    children: [
-      { path: 'theming', component: ThemingComponent }
-    ]
-  },
   {
     path: 'api',
     children: [
@@ -33,10 +23,10 @@ const routes: Routes = [
       { path: 'typography', component: TypographyDemoComponent },
     ]
   },
-  { path: 'component', redirectTo: 'components' },
-  { path: 'get-started/install', redirectTo: 'getting-started/installation' },
-  { path: 'getting-started', redirectTo: 'getting-started/installation' },
-  { path: '**', component: PageNotFoundComponent }
+  { path: 'component', redirectTo: 'components', pathMatch: 'full' },
+  { path: 'get-started/install', redirectTo: 'getting-started/installation', pathMatch: 'full' },
+  { path: 'getting-started', redirectTo: 'getting-started/installation', pathMatch: 'full' },
+  { path: '**', component: PageNotFoundComponent },
 ];
 
 @NgModule({
@@ -45,9 +35,6 @@ const routes: Routes = [
       initialNavigation: 'enabled',
       scrollPositionRestoration: 'enabled'
     })
-  ],
-  exports: [
-    RouterModule
   ]
 })
 export class AppRoutingModule { }

src/app/demo-view/view/view.component.ts

@@ -13,7 +13,7 @@ import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { Router } from '@angular/router';
 import { catchError, retry, map } from 'rxjs/operators';
 import { Platform, AUI_VERSION, LyTheme2 } from '@alyle/ui';
-import { AUIThemeVariables } from '@app/app.module';
+import { AUIThemeVariables } from '../../app.module';
 import { DomSanitizer } from '@angular/platform-browser';
 
 const MODULE_REGEXP = /export\sclass\s([\w]+)Module/;

src/app/docs/components/resizing-cropping-images-demo/resizing-cropping-images-example-01/resizing-cropping-images-example-01.component.ts

@@ -123,7 +123,7 @@ export class ResizingCroppingImagesExample01Component implements AfterViewInit {
   croppedImage?: string;
   result: string;
   scale: number;
-  @ViewChild(LyResizingCroppingImages) cropper: LyResizingCroppingImages;
+  @ViewChild(LyResizingCroppingImages, { static: false }) cropper: LyResizingCroppingImages;
   myConfig: ImgCropperConfig = {
     autoCrop: true,
     width: 150, // Default `250`

src/app/docs/components/resizing-cropping-images-demo/resizing-cropping-images-example-03/resizing-cropping-images-example-03.component.ts

@@ -23,7 +23,7 @@ const styles = {
 export class ResizingCroppingImagesExample03Component {
   classes = this.theme.addStyleSheet(styles);
   croppedImage?: string;
-  @ViewChild(LyResizingCroppingImages) img: LyResizingCroppingImages;
+  @ViewChild(LyResizingCroppingImages, { static: false }) img: LyResizingCroppingImages;
   result: string;
   myConfig: ImgCropperConfig = {
     width: 150, // Default `250`

src/app/docs/customization/dynamic-styles/dynamic-styles.component.ts

@@ -1,8 +1,9 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
   selector: 'aui-dynamic-styles',
-  templateUrl: './dynamic-styles.component.md'
+  templateUrl: 'dynamic-styles.component.md',
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DynamicStylesComponent {
   codeBasicStyleSheet = `
@@ -45,4 +46,6 @@ const styles = (theme: ThemeVariables) => ({
 });
 `;
 
+  constructor() {}
+
 }