chore: 🤖 update angular version to 14.0.0

BREAKING CHANGE: 🧨 support angular version 14.0.0

.gitignore

@@ -6,7 +6,7 @@
 /out-tsc
 
 # dependencies
-/node_modules
+node_modules
 
 # IDEs and editors
 /.idea

workspace.json → angular.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "./node_modules/nx/schemas/workspace-schema.json",
   "version": 2,
   "projects": {
     "ngx-glide": "packages/ngx-glide",

apps/ngx-glide-demo-e2e/project.json

@@ -1,5 +1,5 @@
 {
-  "root": "apps/ngx-glide-demo-e2e",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "apps/ngx-glide-demo-e2e/src",
   "projectType": "application",
   "targets": {

apps/ngx-glide-demo-e2e/src/integration/app.spec.ts

@@ -8,6 +8,6 @@ describe('ngx-glide-demo', () => {
     cy.login('my-email@something.com', 'myPassword');
 
     // Function helper example, see `../support/app.po.ts` file
-    getGreeting().contains('Welcome to ngx-glide-demo!');
+    getGreeting().contains('Welcome ngx-glide-demo');
   });
 });

apps/ngx-glide-demo-e2e/tsconfig.json

@@ -7,11 +7,14 @@
     "types": ["cypress", "node"],
     "forceConsistentCasingInFileNames": true,
     "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true
   },
   "include": ["src/**/*.ts", "src/**/*.js"],
   "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
     "strictTemplates": true

apps/ngx-glide-demo/jest.config.js → apps/ngx-glide-demo/jest.config.ts

@@ -1,4 +1,5 @@
-module.exports = {
+/* eslint-disable */
+export default {
   displayName: 'ngx-glide-demo',
   preset: '../../jest.preset.js',
   setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],

apps/ngx-glide-demo/project.json

@@ -1,6 +1,5 @@
 {
   "projectType": "application",
-  "root": "apps/ngx-glide-demo",
   "sourceRoot": "apps/ngx-glide-demo/src",
   "prefix": "ngx-glide-demo",
   "targets": {
@@ -76,16 +75,16 @@
       "executor": "@nrwl/linter:eslint",
       "options": {
         "lintFilePatterns": [
-          "apps/ngx-glide-demo/src/**/*.ts",
-          "apps/ngx-glide-demo/src/**/*.html"
+          "apps/ngx-glide-demo/**/*.ts",
+          "apps/ngx-glide-demo/**/*.html"
         ]
       }
     },
     "test": {
       "executor": "@nrwl/jest:jest",
       "outputs": ["coverage/apps/ngx-glide-demo"],
       "options": {
-        "jestConfig": "apps/ngx-glide-demo/jest.config.js",
+        "jestConfig": "apps/ngx-glide-demo/jest.config.ts",
         "passWithNoTests": true
       }
     }

apps/ngx-glide-demo/src/main.ts

@@ -1,4 +1,4 @@
-import { enableProdMode, ViewEncapsulation } from '@angular/core';
+import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { AppModule } from './app/app.module';
@@ -9,7 +9,5 @@ if (environment.production) {
 }
 
 platformBrowserDynamic()
-  .bootstrapModule(AppModule, {
-    defaultEncapsulation: ViewEncapsulation.Emulated,
-  })
+  .bootstrapModule(AppModule)
   .catch((err) => console.error(err));

apps/ngx-glide-demo/tsconfig.json

@@ -14,12 +14,16 @@
     }
   ],
   "compilerOptions": {
+    "target": "es2020",
     "forceConsistentCasingInFileNames": true,
     "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true
   },
   "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
     "strictTemplates": true

apps/ngx-glide-demo/tsconfig.spec.json

@@ -6,5 +6,5 @@
     "types": ["jest", "node"]
   },
   "files": ["src/test-setup.ts"],
-  "include": ["**/*.test.ts", "**/*.spec.ts", "**/*.d.ts"]
+  "include": ["jest.config.ts", "**/*.test.ts", "**/*.spec.ts", "**/*.d.ts"]
 }

decorate-angular-cli.js

@@ -0,0 +1,79 @@
+/**
+ * This file decorates the Angular CLI with the Nx CLI to enable features such as computation caching
+ * and faster execution of tasks.
+ *
+ * It does this by:
+ *
+ * - Patching the Angular CLI to warn you in case you accidentally use the undecorated ng command.
+ * - Symlinking the ng to nx command, so all commands run through the Nx CLI
+ * - Updating the package.json postinstall script to give you control over this script
+ *
+ * The Nx CLI decorates the Angular CLI, so the Nx CLI is fully compatible with it.
+ * Every command you run should work the same when using the Nx CLI, except faster.
+ *
+ * Because of symlinking you can still type `ng build/test/lint` in the terminal. The ng command, in this case,
+ * will point to nx, which will perform optimizations before invoking ng. So the Angular CLI is always invoked.
+ * The Nx CLI simply does some optimizations before invoking the Angular CLI.
+ *
+ * To opt out of this patch:
+ * - Replace occurrences of nx with ng in your package.json
+ * - Remove the script from your postinstall script in your package.json
+ * - Delete and reinstall your node_modules
+ */
+
+const fs = require('fs');
+const os = require('os');
+const cp = require('child_process');
+const isWindows = os.platform() === 'win32';
+let output;
+try {
+  output = require('@nrwl/workspace').output;
+} catch (e) {
+  console.warn(
+    'Angular CLI could not be decorated to enable computation caching. Please ensure @nrwl/workspace is installed.'
+  );
+  process.exit(0);
+}
+
+/**
+ * Symlink of ng to nx, so you can keep using `ng build/test/lint` and still
+ * invoke the Nx CLI and get the benefits of computation caching.
+ */
+function symlinkNgCLItoNxCLI() {
+  try {
+    const ngPath = './node_modules/.bin/ng';
+    const nxPath = './node_modules/.bin/nx';
+    if (isWindows) {
+      /**
+       * This is the most reliable way to create symlink-like behavior on Windows.
+       * Such that it works in all shells and works with npx.
+       */
+      ['', '.cmd', '.ps1'].forEach((ext) => {
+        if (fs.existsSync(nxPath + ext))
+          fs.writeFileSync(ngPath + ext, fs.readFileSync(nxPath + ext));
+      });
+    } else {
+      // If unix-based, symlink
+      cp.execSync(`ln -sf ./nx ${ngPath}`);
+    }
+  } catch (e) {
+    output.error({
+      title:
+        'Unable to create a symlink from the Angular CLI to the Nx CLI:' +
+        e.message,
+    });
+    throw e;
+  }
+}
+
+try {
+  symlinkNgCLItoNxCLI();
+  require('nx/src/adapter/decorate-cli').decorateCli();
+  output.log({
+    title: 'Angular CLI has been decorated to enable computation caching.',
+  });
+} catch (e) {
+  output.error({
+    title: 'Decoration of the Angular CLI did not complete successfully',
+  });
+}

jest.config.ts

@@ -0,0 +1,5 @@
+import { getJestProjects } from '@nrwl/jest';
+
+export default {
+  projects: getJestProjects(),
+};

jest.preset.js

@@ -1,3 +1,3 @@
-const nxPreset = require('@nrwl/jest/preset');
+const nxPreset = require('@nrwl/jest/preset').default;
 
 module.exports = { ...nxPreset };

nx.json

@@ -1,9 +1,11 @@
 {
+  "$schema": "./node_modules/nx/schemas/nx-schema.json",
   "npmScope": "ngx-glide",
   "affected": {
     "defaultBase": "main"
   },
   "cli": {
+    "packageManager": "npm",
     "defaultCollection": "@nrwl/angular"
   },
   "implicitDependencies": {
@@ -15,10 +17,9 @@
   },
   "tasksRunnerOptions": {
     "default": {
-      "runner": "@nrwl/workspace/tasks-runners/default",
+      "runner": "nx/tasks-runners/default",
       "options": {
-        "cacheableOperations": ["build", "lint", "test", "e2e"],
-        "parallel": 1
+        "cacheableOperations": ["build", "lint", "test", "e2e"]
       }
     }
   },
@@ -42,7 +43,6 @@
       "e2eTestRunner": "cypress"
     },
     "@nrwl/angular:library": {
-      "style": "scss",
       "linter": "eslint",
       "unitTestRunner": "jest"
     },