Initial Dashboard App

.eslintrc.js

@@ -144,7 +144,9 @@ module.exports = {
             extends: [
                 'plugin:@typescript-eslint/eslint-recommended',
                 'plugin:@typescript-eslint/recommended',
-                'plugin:import/typescript'
+                'plugin:import/typescript',
+                'plugin:@nrwl/nx/angular',
+                'plugin:@angular-eslint/template/process-inline-templates'
             ],
             rules: {
                 '@angular-eslint/component-class-suffix': 'error',

angular.json

@@ -4,11 +4,6 @@
   "projects": {
     "todo": {
       "projectType": "application",
-      "schematics": {
-        "@nrwl/angular:component": {
-          "style": "scss"
-        }
-      },
       "root": "apps/todo",
       "sourceRoot": "apps/todo/src",
       "prefix": "al",
@@ -130,13 +125,7 @@
         "lint": {
           "builder": "@nrwl/linter:eslint",
           "options": {
-            "lintFilePatterns": [
-              "apps/todo/src/main.ts",
-              "apps/todo/src/polyfills.ts",
-              "apps/todo/**/*.spec.ts",
-              "apps/todo/**/*.d.ts",
-              "apps/todo/src/test-setup.ts"
-            ]
+            "lintFilePatterns": ["apps/todo/src/**/*.ts"]
           }
         },
         "test": {
@@ -191,6 +180,120 @@
         }
       }
     },
+    "favourite": {
+      "projectType": "application",
+      "root": "apps/favourite",
+      "sourceRoot": "apps/favourite/src",
+      "prefix": "al",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/apps/favourite",
+            "index": "apps/favourite/src/index.html",
+            "main": "apps/favourite/src/main.ts",
+            "polyfills": "apps/favourite/src/polyfills.ts",
+            "tsConfig": "apps/favourite/tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "apps/favourite/src/favicon.ico",
+              "apps/favourite/src/assets"
+            ],
+            "styles": ["apps/favourite/src/styles.scss"],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "fileReplacements": [
+                {
+                  "replace": "apps/favourite/src/environments/environment.ts",
+                  "with": "apps/favourite/src/environments/environment.prod.ts"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "browserTarget": "favourite:build:production"
+            },
+            "development": {
+              "browserTarget": "favourite:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "favourite:build"
+          }
+        },
+        "lint": {
+          "builder": "@nrwl/linter:eslint",
+          "options": {
+            "lintFilePatterns": ["apps/favourite/src/**/*.ts"]
+          }
+        },
+        "test": {
+          "builder": "@nrwl/jest:jest",
+          "outputs": ["coverage/apps/favourite"],
+          "options": {
+            "jestConfig": "apps/favourite/jest.config.js"
+          }
+        }
+      }
+    },
+    "favourite-e2e": {
+      "root": "apps/favourite-e2e",
+      "sourceRoot": "apps/favourite-e2e/src",
+      "projectType": "application",
+      "architect": {
+        "e2e": {
+          "builder": "@nrwl/cypress:cypress",
+          "options": {
+            "cypressConfig": "apps/favourite-e2e/cypress.json",
+            "tsConfig": "apps/favourite-e2e/tsconfig.e2e.json",
+            "devServerTarget": "favourite:serve:development"
+          },
+          "configurations": {
+            "production": {
+              "devServerTarget": "favourite:serve:production"
+            }
+          }
+        },
+        "lint": {
+          "builder": "@nrwl/linter:eslint",
+          "options": {
+            "lintFilePatterns": ["apps/favourite-e2e/**/*.{js,ts}"]
+          }
+        }
+      }
+    },
     "logger": {
       "projectType": "library",
       "root": "libs/logger",
@@ -324,13 +427,7 @@
         "lint": {
           "builder": "@nrwl/linter:eslint",
           "options": {
-            "lintFilePatterns": [
-              "apps/spotify-player/src/main.ts",
-              "apps/spotify-player/src/polyfills.ts",
-              "apps/spotify-player/**/*.spec.ts",
-              "apps/spotify-player/**/*.d.ts",
-              "apps/spotify-player/src/test-setup.ts"
-            ]
+            "lintFilePatterns": ["apps/spotify-player/src/**/*.ts"]
           }
         },
         "test": {
@@ -524,6 +621,44 @@
         }
       }
     },
+    "dashboard-components": {
+      "projectType": "library",
+      "root": "libs/components/dashboard",
+      "sourceRoot": "libs/components/dashboard/src",
+      "prefix": "al",
+      "architect": {
+        "build": {
+          "builder": "@nrwl/angular:package",
+          "options": {
+            "tsConfig": "libs/components/dashboard/tsconfig.lib.json",
+            "project": "libs/components/dashboard/ng-package.json",
+            "buildableProjectDepsInPackageJsonType": "dependencies"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "libs/components/dashboard/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "libs/components/dashboard/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@nrwl/jest:jest",
+          "outputs": ["coverage/libs/components/dashboard"],
+          "options": {
+            "jestConfig": "libs/components/dashboard/jest.config.js"
+          }
+        },
+        "lint": {
+          "builder": "@nrwl/linter:eslint",
+          "options": {
+            "lintFilePatterns": ["libs/components/dashboard/src/**/*.ts"]
+          }
+        }
+      }
+    },
     "history": {
       "root": "libs/history",
       "sourceRoot": "libs/history/src",
@@ -572,19 +707,26 @@
   },
   "schematics": {
     "@nrwl/angular:application": {
+      "style": "scss",
       "linter": "eslint",
       "unitTestRunner": "jest",
-      "e2eTestRunner": "cypress"
+      "e2eTestRunner": "cypress",
+      "strict": true
     },
     "@nrwl/angular:library": {
+      "style": "scss",
       "linter": "eslint",
       "unitTestRunner": "jest",
       "strict": true
     },
     "@schematics/angular:component": {
       "style": "scss",
       "changeDetection": "OnPush",
-      "prefix": "al"
+      "prefix": "al",
+      "viewEncapsulation": "ShadowDom"
+    },
+    "@nrwl/angular:component": {
+      "style": "scss"
     }
   },
   "defaultProject": "todo"

apps/favourite-e2e/.eslintrc.js

@@ -0,0 +1,2 @@
+/* eslint-env node */
+module.exports = require('../../.eslintrc.js');

apps/favourite-e2e/cypress.json

@@ -0,0 +1,12 @@
+{
+  "fileServerFolder": ".",
+  "fixturesFolder": "./src/fixtures",
+  "integrationFolder": "./src/integration",
+  "modifyObstructiveCode": false,
+  "pluginsFile": "./src/plugins/index",
+  "supportFile": "./src/support/index.ts",
+  "video": true,
+  "videosFolder": "../../dist/cypress/apps/favourite-e2e/videos",
+  "screenshotsFolder": "../../dist/cypress/apps/favourite-e2e/screenshots",
+  "chromeWebSecurity": false
+}

apps/favourite-e2e/src/fixtures/example.json

@@ -0,0 +1,4 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io"
+}

apps/favourite-e2e/src/integration/app.spec.ts

@@ -0,0 +1,9 @@
+import {getGreeting} from '../support/app.po';
+
+describe('favourite', () => {
+  beforeEach(() => cy.visit('/'));
+
+  it('should display welcome message', () => {
+    getGreeting().contains('Bookmarks');
+  });
+});

apps/favourite-e2e/src/plugins/index.js

@@ -0,0 +1,17 @@
+/* eslint-env node */
+
+/**
+ * This function is called when a project is opened or re-opened (e.g. due to
+ * the project's config changing)
+ */
+
+const {preprocessTypescript} = require('@nrwl/cypress/plugins/preprocessor');
+
+/**
+ * @param on is used to hook into various events Cypress emits
+ * @param config is the resolved Cypress config
+ */
+module.exports = (on, config) => {
+    // Preprocess Typescript file using Nx helper
+    on('file:preprocessor', preprocessTypescript(config));
+};

apps/favourite-e2e/src/support/app.po.ts

@@ -0,0 +1,6 @@
+/**
+ * Get the greeting.
+ *
+ * @returns h1 element.
+ */
+export const getGreeting = (): Cypress.Chainable<JQuery<HTMLHeadingElement>> => cy.get('h1', {includeShadowDom: true});

apps/favourite-e2e/src/support/commands.ts

@@ -0,0 +1,9 @@
+/**
+ * This example commands.js shows you how to
+ * create various custom commands and overwrite
+ * existing commands.
+ *
+ * For more comprehensive examples of custom
+ * commands please read more here:
+ * https://on.cypress.io/custom-commands
+ */

apps/favourite-e2e/src/support/index.ts

@@ -0,0 +1,17 @@
+/**
+ * This example support/index.js is processed and
+ * loaded automatically before your test files.
+ *
+ * This is a great place to put global configuration and
+ * behavior that modifies Cypress.
+ *
+ * You can change the location of this file or turn off
+ * automatically serving support files with the
+ * 'supportFile' configuration option.
+ *
+ * You can read more here:
+ * https://on.cypress.io/configuration
+ */
+
+// Import commands.js using ES2015 syntax:
+import './commands';

apps/favourite-e2e/tsconfig.e2e.json

@@ -0,0 +1,18 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "sourceMap": false,
+    "outDir": "../../dist/out-tsc",
+    "allowJs": true,
+    "types": ["cypress", "node"],
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.js"],
+  "angularCompilerOptions": {
+    "strictInjectionParameters": true,
+    "strictTemplates": true
+  }
+}

apps/favourite-e2e/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.e2e.json"
+    }
+  ]
+}

apps/favourite/.browserslistrc

@@ -0,0 +1,17 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
+not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

apps/favourite/.eslintrc.js

@@ -0,0 +1,2 @@
+/* eslint-env node */
+module.exports = require('../../.eslintrc.js');