refactor: update to @angular 9.0.0 & cypress 4.0.0

.circleci/config.yml

@@ -16,7 +16,7 @@ aliases:
   # https://github.com/cypress-io/cypress-docker-images/tree/master/included
   - &use_docker_cypress_included
     docker:
-      - image: cypress/included:3.8.3
+      - image: cypress/included:4.0.0
 
   - &workspace ~/talus
 

README.md

@@ -187,6 +187,10 @@ See scripts on [nx.dev](https://nx.dev/angular/api/workspace/npmscripts)
 - `ng update @angular/cli @angular/core`
 - [Angular Update Guide](https://update.angular.io/)
 
+### Generate transpiled code with AOT-compiler `ngc`
+
+- `ngc -p ./apps/frontend/tsconfig.app.json` (output: `./dist/out-tsc`)
+
 ## Github Pages
 
 CircleCI pushes every build onto the

angular.json

@@ -18,6 +18,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
+            "aot": true,
             "outputPath": "dist/apps/frontend",
             "index": "apps/frontend/src/index.html",
             "main": "apps/frontend/src/main.ts",
@@ -49,6 +50,10 @@
                   "type": "initial",
                   "maximumWarning": "2mb",
                   "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
                 }
               ]
             }

apps/frontend/src/app/options-panel/options-panel.component.spec.ts

@@ -1,5 +1,5 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatIconModule } from '@angular/material';
+import { MatIconModule } from '@angular/material/icon';
 import { provideMockActions } from '@ngrx/effects/testing';
 import { Action, MemoizedSelector, Store } from '@ngrx/store';
 import { MockStore, provideMockStore } from '@ngrx/store/testing';

apps/frontend/src/app/options-panel/options-panel.module.ts

@@ -1,6 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { MatButtonModule, MatIconModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 import { EffectsModule } from '@ngrx/effects';
 import { UiColorDialogModule } from '@talus/ui';
 import { OptionsPanelComponent } from './options-panel.component';

apps/frontend/src/app/scene-viewer-container/scene-viewer-container.component.ts

@@ -28,7 +28,7 @@ import {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SceneViewerContainerComponent implements AfterViewInit {
-  @ViewChild(UiSceneViewerComponent, { static: false })
+  @ViewChild(UiSceneViewerComponent)
   private sceneViewerComponent: UiSceneViewerComponent;
 
   private selectedToolId$: Observable<Tool> = this.store.pipe(select(fromApp.selectSelectedToolId));

apps/frontend/src/main.ts

@@ -1,6 +1,5 @@
 import { enableProdMode, ViewEncapsulation } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import 'hammerjs';
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
 

apps/frontend/src/test-setup.ts

@@ -1,2 +1 @@
-import 'hammerjs';
 import 'jest-preset-angular';

apps/frontend/tsconfig.app.json

@@ -4,6 +4,6 @@
     "outDir": "../../dist/out-tsc",
     "types": []
   },
-  "include": ["**/*.ts"],
-  "exclude": ["src/test-setup.ts", "**/*.spec.ts"]
+  "files": ["src/main.ts", "src/polyfills.ts"],
+  "include": ["**/*.d.ts"]
 }

libs/ui/src/lib/color-dialog/color-dialog.component.spec.ts

@@ -1,5 +1,5 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { UiColorDialogComponent } from './color-dialog.component';
 import { UiColorDialogModule } from './color-dialog.module';
 

libs/ui/src/lib/color-dialog/color-dialog.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 
 export interface UiColorDialogColor {
   r: number;

libs/ui/src/lib/color-dialog/color-dialog.module.ts

@@ -1,12 +1,10 @@
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import {
-  MatButtonModule,
-  MatDialogModule,
-  MatIconModule,
-  MatToolbarModule,
-} from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatToolbarModule } from '@angular/material/toolbar';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { UiColorDialogComponent } from './color-dialog.component';
 import { UiColorDialogService } from './color-dialog.service';

libs/ui/src/lib/color-dialog/color-dialog.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { MatDialog, MatDialogRef } from '@angular/material';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import {
   UiColorDialogColor,
   UiColorDialogComponent,

libs/ui/src/lib/menu-bar/menu-bar.module.ts

@@ -1,6 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { MatButtonModule, MatIconModule, MatMenuModule, MatToolbarModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatToolbarModule } from '@angular/material/toolbar';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { UiMenuBarComponent } from './menu-bar.component';
 

libs/ui/src/lib/sidenav-shell/sidenav-shell.component.spec.ts

@@ -1,7 +1,6 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatSidenav } from '@angular/material';
+import { MatSidenav } from '@angular/material/sidenav';
 import { By } from '@angular/platform-browser';
-
 import { UiSidenavShellComponent } from './sidenav-shell.component';
 import { UiSidenavShellModule } from './sidenav-shell.module';
 

libs/ui/src/lib/sidenav-shell/sidenav-shell.module.ts

@@ -1,6 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { MatButtonModule, MatIconModule, MatSidenavModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSidenavModule } from '@angular/material/sidenav';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import {
   UiSidenavShellComponent,

libs/ui/src/lib/toolbar/toolbar.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-import { MatButtonToggleChange } from '@angular/material';
+import { MatButtonToggleChange } from '@angular/material/button-toggle';
 
 export interface UiToolbarToolConfig<T> {
   tooltip?: string;

libs/ui/src/lib/toolbar/toolbar.module.ts

@@ -1,6 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { MatButtonToggleModule, MatIconModule, MatTooltipModule } from '@angular/material';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { UiToolbarComponent } from './toolbar.component';
 
 @NgModule({

libs/ui/src/test-setup.ts

@@ -1,2 +1 @@
-import 'hammerjs';
 import 'jest-preset-angular';

package.json

@@ -22,6 +22,7 @@
     "lint:styles": "stylelint \"{apps,libs}/**/*.{css,scss}\"",
     "ng": "ng",
     "nx": "nx",
+    "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points",
     "prettier:check": "yarn prettier --check --config ./.prettierrc --ignore-path ./.prettierignore '{*,\\.circleci,apps,libs}/**/*.{ts,scss,json,html,yml}'",
     "start": "ng serve",
     "test": "ng test",
@@ -32,56 +33,55 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "8.2.14",
-    "@angular/cdk": "8.2.3",
-    "@angular/common": "8.2.14",
-    "@angular/compiler": "8.2.14",
-    "@angular/core": "8.2.14",
-    "@angular/forms": "8.2.14",
-    "@angular/material": "8.2.3",
-    "@angular/platform-browser": "8.2.14",
-    "@angular/platform-browser-dynamic": "8.2.14",
-    "@angular/router": "8.2.14",
-    "@babylonjs/core": "4.1.0-beta.21",
-    "@babylonjs/materials": "4.1.0-beta.21",
+    "@angular/animations": "9.0.0",
+    "@angular/cdk": "9.0.0",
+    "@angular/common": "9.0.0",
+    "@angular/compiler": "9.0.0",
+    "@angular/core": "9.0.0",
+    "@angular/forms": "9.0.0",
+    "@angular/material": "9.0.0",
+    "@angular/platform-browser": "9.0.0",
+    "@angular/platform-browser-dynamic": "9.0.0",
+    "@angular/router": "9.0.0",
+    "@babylonjs/core": "4.1.0-beta.23",
+    "@babylonjs/materials": "4.1.0-beta.23",
     "@ngrx/effects": "8.6.0",
     "@ngrx/store": "8.6.0",
-    "@nrwl/angular": "8.12.1",
-    "hammerjs": "2.0.8",
+    "@nrwl/angular": "8.12.2",
     "mnemonist": "0.32.0",
     "rxjs": "6.5.4",
+    "tslib": "1.10.0",
     "zone.js": "0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "0.803.24",
-    "@angular/cli": "8.3.24",
-    "@angular/compiler-cli": "8.2.14",
-    "@angular/language-service": "8.2.14",
+    "@angular-devkit/build-angular": "0.900.1",
+    "@angular/cli": "9.0.1",
+    "@angular/compiler-cli": "9.0.0",
+    "@angular/language-service": "9.0.0",
     "@babel/core": "7.8.4",
-    "@babylonjs/inspector": "4.1.0-beta.21",
-    "@nrwl/cypress": "8.12.1",
-    "@nrwl/eslint-plugin-nx": "8.12.1",
-    "@nrwl/jest": "8.12.1",
-    "@nrwl/node": "8.12.1",
-    "@nrwl/storybook": "8.12.1",
-    "@nrwl/workspace": "8.12.1",
-    "@storybook/addon-knobs": "5.3.10",
-    "@storybook/angular": "5.3.10",
+    "@babylonjs/inspector": "4.1.0-beta.23",
+    "@nrwl/cypress": "8.12.2",
+    "@nrwl/eslint-plugin-nx": "8.12.2",
+    "@nrwl/jest": "8.12.2",
+    "@nrwl/node": "8.12.2",
+    "@nrwl/storybook": "8.12.2",
+    "@nrwl/workspace": "8.12.2",
+    "@storybook/addon-knobs": "5.3.12",
+    "@storybook/angular": "5.3.12",
     "@types/benchmark": "1.0.31",
     "@types/jest": "24.9.0",
     "@types/node": "13.7.0",
-    "@typescript-eslint/eslint-plugin": "2.18.0",
-    "@typescript-eslint/parser": "2.18.0",
+    "@typescript-eslint/eslint-plugin": "2.19.0",
+    "@typescript-eslint/parser": "2.19.0",
     "babel-loader": "8.0.6",
-    "babylonjs": "4.1.0-beta.21",
+    "babylonjs": "4.1.0-beta.23",
     "benchmark": "2.1.4",
     "codelyzer": "5.2.1",
-    "cypress": "3.8.3",
+    "cypress": "4.0.0",
     "dotenv": "8.2.0",
     "eslint": "6.8.0",
     "eslint-config-prettier": "6.10.0",
     "gh-pages": "2.2.0",
-    "handlebars": "4.7.2",
     "jasmine-marbles": "0.6.0",
     "jest": "24.9.0",
     "jest-junit": "10.0.0",
@@ -96,6 +96,6 @@
     "ts-jest": "24.3.0",
     "ts-node": "8.6.2",
     "tslint": "5.20.1",
-    "typescript": "3.5.3"
+    "typescript": "3.7.5"
   }
 }