refactor: convert app to latest Angular CLI format

fix some Ivy and TypeScript compilation and configuration issues
add a `build:highmem` for use when the build fails due to memory usage
update all dependencies that are supported
remove unneeded polyfills now that differential loading is supported
convert workspace to current format
move and update tsconfigs to match current CLI format
log errors on bootstrap
enable some router quality of life options
add a `Version` interface
update StackBlitz
- Copyright
- major Angular version
- dependencies
fix build error for `setTimeout`
- it was resolving to the NodeJS version rather than DOM version

Author: Splaktar

.gitignore

@@ -3,19 +3,34 @@
 # compiled output
 /dist
 /tmp
+/out-tsc
 /src/assets/*.css
+# Only exists if Bazel was run
+/bazel-out
 
 # dependencies
 /node_modules
-/bower_components
+
+# profiling files
+chrome-profiler-events*.json
+speed-measure-plugin*.json
 
 # IDEs and editors
 /.idea
-/.vscode
 .project
 .classpath
+.c9/
 *.launch
 .settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
 
 # misc
 /.sass-cache
@@ -27,10 +42,6 @@ yarn-error.log
 testem.log
 /typings
 
-# e2e
-/e2e/*.js
-/e2e/*.map
-
 #System Files
 .DS_Store
 Thumbs.db

angular.json

@@ -1,10 +1,16 @@
 {
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
     "material-angular-io": {
       "root": "",
       "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
@@ -14,7 +20,7 @@
             "outputPath": "dist",
             "index": "src/index.html",
             "main": "src/main.ts",
-            "tsConfig": "src/tsconfig.json",
+            "tsConfig": "tsconfig.app.json",
             "assets": [
               {
                 "glob": "**/*",
@@ -104,8 +110,8 @@
           "options": {
             "main": "src/test.ts",
             "polyfills": "src/polyfills.ts",
-            "karmaConfig": "./karma.conf.js",
-            "tsConfig": "src/tsconfig.spec.json",
+            "karmaConfig": "karma.conf.js",
+            "tsConfig": "tsconfig.spec.json",
             "scripts": [],
             "styles": [
               {
@@ -153,38 +159,28 @@
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
             "tsConfig": [
-              "src/tsconfig.json"
+              "tsconfig.app.json",
+              "tsconfig.spec.json",
+              "e2e/tsconfig.json"
             ],
             "exclude": [
               "**/node_modules/**"
             ]
           }
-        }
-      }
-    },
-    "material-angular-io-e2e": {
-      "root": "",
-      "projectType": "application",
-      "cli": {},
-      "schematics": {},
-      "architect": {
+        },
         "e2e": {
           "builder": "@angular-devkit/build-angular:protractor",
           "options": {
-            "protractorConfig": "./protractor.conf.js",
+            "protractorConfig": "e2e/protractor.conf.js",
             "devServerTarget": "material-angular-io:serve"
+          },
+          "configurations": {
+            "production": {
+              "devServerTarget": "material-angular-io:serve:production"
+            }
           }
         }
       }
     }
-  },
-  "schematics": {
-    "@schematics/angular:component": {
-      "prefix": "app",
-      "styleext": "css"
-    },
-    "@schematics/angular:directive": {
-      "prefix": "app"
-    }
   }
 }

e2e/app.e2e-spec.ts

@@ -1,38 +1,37 @@
+// @ts-check
 // Protractor configuration file, see link for more information
-// https://github.com/angular/protractor/blob/master/docs/referenceConf.js
+// https://github.com/angular/protractor/blob/master/lib/config.ts
 
-/*global jasmine */
-const SpecReporter = require('jasmine-spec-reporter');
+const {SpecReporter} = require('jasmine-spec-reporter');
 
+/**
+ * @type { import("protractor").Config }
+ */
 let config = {
   allScriptsTimeout: 11000,
   specs: [
-    './e2e/**/*.e2e-spec.ts'
+    './src/**/*.e2e-spec.ts'
   ],
   capabilities: {
     'browserName': 'chrome'
   },
+  directConnect: true,
   baseUrl: 'http://localhost:4200/',
   framework: 'jasmine',
   jasmineNodeOpts: {
     showColors: true,
     defaultTimeoutInterval: 30000,
     print: function() {}
   },
-  useAllAngular2AppRoots: true,
-  beforeLaunch: function() {
+  onPrepare() {
     require('ts-node').register({
-      project: 'e2e'
+      project: require('path').join(__dirname, './tsconfig.json')
     });
-  },
-  onPrepare: function() {
-    jasmine.getEnv().addReporter(new SpecReporter());
+    jasmine.getEnv().addReporter(new SpecReporter({spec: {displayStacktrace: true}}));
   }
 };
 
-
 if (process.env['TRAVIS']) {
-
   config.sauceUser = process.env['SAUCE_USERNAME'];
   config.sauceKey = process.env['SAUCE_ACCESS_KEY'].split('').reverse().join('');
 
@@ -42,7 +41,6 @@ if (process.env['TRAVIS']) {
     'build': process.env['TRAVIS_JOB_NUMBER'],
     'name': 'Material Docs E2E'
   };
-
 }
 
 exports.config = config;

e2e/app.po.ts

@@ -0,0 +1,25 @@
+import {MaterialDocsAppPage} from './app.po';
+import {browser, logging} from 'protractor';
+
+describe('Material Docs App', () => {
+  let page: MaterialDocsAppPage;
+
+  beforeEach(() => {
+    page = new MaterialDocsAppPage();
+  });
+
+  it('should display welcome message', () => {
+    page.navigateTo();
+    page.getTitleText().then((title: string) => {
+      expect(title).toEqual('Angular Material');
+    });
+  });
+
+  afterEach(async () => {
+    // Assert that there are no errors emitted from the browser
+    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
+    expect(logs).not.toContain(jasmine.objectContaining({
+      level: logging.Level.SEVERE,
+    } as logging.Entry));
+  });
+});

protractor.conf.js renamed to e2e/protractor.conf.js

@@ -0,0 +1,12 @@
+import {browser, by, element} from 'protractor';
+
+export class MaterialDocsAppPage {
+  navigateTo() {
+    return browser.get(browser.baseUrl) as Promise<any>;
+  }
+
+  getTitleText() {
+    return element(by.css('app-homepage header .docs-header-headline .mat-h1'))
+      .getText() as Promise<string>;
+  }
+}

e2e/src/app.e2e-spec.ts

@@ -1,16 +1,13 @@
 {
-  "compileOnSave": false,
+  "extends": "../tsconfig.json",
   "compilerOptions": {
-    "declaration": false,
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
+    "outDir": "../out-tsc/e2e",
     "module": "commonjs",
-    "moduleResolution": "node",
-    "outDir": "../dist/out-tsc-e2e",
-    "sourceMap": true,
     "target": "es5",
-    "typeRoots": [
-      "../node_modules/@types"
+    "types": [
+      "jasmine",
+      "jasminewd2",
+      "node"
     ]
   }
 }

e2e/src/app.po.ts

@@ -4,60 +4,65 @@
   "license": "MIT",
   "angular-cli": {},
   "scripts": {
+    "ng": "ng",
     "start": "yarn build-themes && ng serve",
     "start-jit": "yarn build-themes && ng serve --aot=false",
-    "lint": "tslint -p src/tsconfig.json",
+    "start:prod": "yarn build-themes && ng serve --prod",
+    "lint": "tslint -p tsconfig.json",
     "test": "yarn build-themes && ng test",
     "pree2e": "webdriver-manager update",
-    "e2e": "protractor",
+    "e2e": "yarn build-themes && ng e2e",
+    "build": "yarn build-themes && ng build",
+    "build:highmem": "yarn build-themes && node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng build",
+    "build:sm": "ng build --prod --source-map",
     "build-themes": "bash ./tools/build-themes.sh",
-    "prod-build": "yarn build-themes && ng build --aot --prod",
+    "prod-build": "yarn build-themes && ng build --prod",
     "postinstall": "webdriver-manager update --gecko false && yarn build-themes",
     "publish-prod": "bash ./tools/deploy.sh stable prod",
     "publish-dev": "bash ./tools/deploy.sh",
     "publish-beta": "bash ./tools/deploy.sh stable beta"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^8.0.0",
-    "@angular/cdk": "^8.1.4",
-    "@angular/cdk-experimental": "^8.1.1",
-    "@angular/common": "^8.0.0",
-    "@angular/compiler": "^8.0.0",
-    "@angular/core": "^8.0.0",
-    "@angular/forms": "^8.0.0",
-    "@angular/material": "^8.1.4",
+    "@angular/animations": "^8.2.8",
+    "@angular/cdk": "^8.2.2",
+    "@angular/cdk-experimental": "^8.2.2",
+    "@angular/common": "^8.2.8",
+    "@angular/compiler": "^8.2.8",
+    "@angular/core": "^8.2.8",
+    "@angular/forms": "^8.2.8",
+    "@angular/material": "^8.2.2",
     "@angular/material-examples": "angular/material2-docs-content#8.1.x",
-    "@angular/material-experimental": "^8.1.1",
-    "@angular/material-moment-adapter": "^8.1.4",
-    "@angular/platform-browser": "^8.0.0",
-    "@angular/platform-browser-dynamic": "^8.0.0",
-    "@angular/router": "^8.0.0",
-    "core-js": "^2.6.1",
+    "@angular/material-experimental": "^8.2.2",
+    "@angular/material-moment-adapter": "^8.2.2",
+    "@angular/platform-browser": "^8.2.8",
+    "@angular/platform-browser-dynamic": "^8.2.8",
+    "@angular/router": "^8.2.8",
+    "core-js": "^2.6.9",
     "hammerjs": "^2.0.8",
-    "material-components-web": "^1.1.1",
-    "moment": "^2.23.0",
-    "rxjs": "^6.5.1",
-    "zone.js": "^0.9.0"
+    "material-components-web": "^4.0.0-alpha.0",
+    "moment": "^2.24.0",
+    "rxjs": "^6.5.3",
+    "zone.js": "^0.9.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.800.0",
-    "@angular/cli": "^8.0.0",
-    "@angular/compiler-cli": "^8.0.0",
-    "@types/jasmine": "^3.3.5",
-    "@types/node": "^10.12.18",
-    "firebase-tools": "^6.2.2",
-    "jasmine-core": "~2.99.1",
+    "@angular-devkit/build-angular": "^0.803.6",
+    "@angular/cli": "^8.3.6",
+    "@angular/compiler-cli": "^8.2.8",
+    "@types/jasmine": "^3.4.1",
+    "@types/node": "^12.7.8",
+    "firebase-tools": "^7.4.0",
+    "jasmine-core": "^3.5.0",
     "jasmine-spec-reporter": "~4.2.1",
-    "karma": "^3.1.4",
-    "karma-chrome-launcher": "^2.2.0",
+    "karma": "^4.3.0",
+    "karma-chrome-launcher": "^3.1.0",
     "karma-firefox-launcher": "^1.1.0",
-    "karma-jasmine": "^1.1.2",
-    "karma-jasmine-html-reporter": "^0.2.2",
+    "karma-jasmine": "^2.0.1",
+    "karma-jasmine-html-reporter": "^1.4.2",
     "node-sass": "^4.11.0",
-    "protractor": "~5.3.0",
-    "ts-node": "^6.0.3",
-    "tslint": "^5.10.0",
-    "typescript": "3.4"
+    "protractor": "^5.4.2",
+    "ts-node": "^8.4.1",
+    "tslint": "^5.20.0",
+    "typescript": "3.5.3"
   }
 }

e2e/tsconfig.json

@@ -42,7 +42,11 @@ import {GaService} from './shared/ga/ga';
     FormsModule,
     HttpClientModule,
     MatNativeDateModule,
-    RouterModule.forRoot(MATERIAL_DOCS_ROUTES),
+    RouterModule.forRoot(MATERIAL_DOCS_ROUTES, {
+      scrollPositionRestoration: 'enabled',
+      anchorScrolling: 'enabled',
+      relativeLinkResolution: 'corrected'
+    }),
     ComponentCategoryListModule,
     ComponentHeaderModule,
     ComponentListModule,