feat: Nx 12.4 compat with Angular 12 + NativeScript 8 and improved webpack + dep handling

package.json

@@ -6,7 +6,7 @@
   "private": true,
   "scripts": {
     "build": "./scripts/package.sh --local",
-    "clean": "npx rimraf package-lock.json node_modules && npm install --legacy-peer-deps",
+    "clean": "npx rimraf package-lock.json node_modules yarn.lock && yarn",
     "commit": "git-cz",
     "checkcommit": "node ./scripts/commit-lint.js",
     "e2e": "./scripts/e2e.sh",
@@ -34,57 +34,56 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@angular-devkit/architect": "~0.1102.0",
-    "@angular-devkit/build-angular": "~0.1102.0",
-    "@angular-devkit/build-optimizer": "~0.1102.0",
-    "@angular-devkit/build-webpack": "~0.1102.0",
-    "@angular-devkit/core": "~11.2.0",
-    "@angular-devkit/schematics": "~11.2.0",
-    "@angular-eslint/eslint-plugin": "~2.0.2",
-    "@angular-eslint/eslint-plugin-template": "~2.0.2",
-    "@angular-eslint/template-parser": "~2.0.2",
-    "@angular/cli": "~11.2.0",
-    "@angular/common": "~11.2.0",
-    "@angular/compiler": "~11.2.0",
-    "@angular/compiler-cli": "~11.2.0",
-    "@angular/core": "~11.2.0",
-    "@angular/forms": "~11.2.0",
-    "@angular/platform-browser": "~11.2.0",
-    "@angular/platform-browser-dynamic": "~11.2.0",
-    "@angular/router": "~11.2.0",
-    "@angular/service-worker": "~11.2.0",
-    "@angular/upgrade": "~11.2.0",
+    "@angular-devkit/architect": "^0.1200.0",
+    "@angular-devkit/build-angular": "^12.0.0",
+    "@angular-devkit/build-optimizer": "^0.1200.0",
+    "@angular-devkit/build-webpack": "^0.1200.0",
+    "@angular-devkit/core": "^12.0.0",
+    "@angular-devkit/schematics": "^12.0.0",
+    "@angular-eslint/eslint-plugin": "^12.0.0",
+    "@angular-eslint/eslint-plugin-template": "^12.0.0",
+    "@angular-eslint/template-parser": "^12.0.0",
+    "@angular/cli": "^12.0.0",
+    "@angular/common": "^12.0.0",
+    "@angular/compiler": "^12.0.0",
+    "@angular/compiler-cli": "^12.0.0",
+    "@angular/core": "^12.0.0",
+    "@angular/forms": "^12.0.0",
+    "@angular/platform-browser": "^12.0.0",
+    "@angular/platform-browser-dynamic": "^12.0.0",
+    "@angular/router": "^12.0.0",
+    "@angular/service-worker": "^12.0.0",
+    "@angular/upgrade": "^12.0.0",
     "@cypress/webpack-preprocessor": "^5.4.2",
-    "@nrwl/angular": "12.0.0",
-    "@nrwl/cli": "12.0.0",
-    "@nrwl/express": "^12.0.6",
-    "@nrwl/jest": "12.0.0",
-    "@nrwl/linter": "12.0.0",
-    "@nrwl/nest": "^12.0.6",
-    "@nrwl/node": "12.0.0",
-    "@nrwl/react": "^12.0.6",
-    "@nrwl/tao": "12.0.0",
-    "@nrwl/web": "12.0.0",
-    "@nrwl/workspace": "12.0.0",
-    "@schematics/angular": "~11.2.0",
+    "@nrwl/angular": "~12.4.0",
+    "@nrwl/cli": "~12.4.0",
+    "@nrwl/devkit": "~12.4.0",
+    "@nrwl/express": "~12.4.0",
+    "@nrwl/jest": "~12.4.0",
+    "@nrwl/linter": "~12.4.0",
+    "@nrwl/nest": "~12.4.0",
+    "@nrwl/node": "~12.4.0",
+    "@nrwl/react": "~12.4.0",
+    "@nrwl/tao": "~12.4.0",
+    "@nrwl/web": "~12.4.0",
+    "@nrwl/workspace": "~12.4.0",
+    "@schematics/angular": "^12.0.0",
     "@types/express": "~4.17.0",
     "@types/jasmine": "~3.5.11",
     "@types/jasminewd2": "~2.0.3",
     "@types/jest": "~26.0.7",
-    "@types/node": "~12.0.0",
+    "@types/node": "14.14.37",
     "@types/prettier": "~2.0.2",
-    "@types/webpack": "^4.4.24",
+    "@types/webpack": "^5.28.0",
     "@types/xml2js": "^0.4.5",
     "@types/yargs": "~15.0.5",
     "app-root-path": "~3.0.0",
     "circular-dependency-plugin": "~5.2.0",
     "codelyzer": "~6.0.0",
-    "commitizen": "~4.1.2",
+    "commitizen": "~4.2.0",
     "conventional-changelog-cli": "~2.1.0",
-    "copy-webpack-plugin": "~6.1.0",
-    "cosmiconfig": "~6.0.0",
-    "cypress": "~4.11.0",
-    "cz-conventional-changelog": "~3.2.0",
+    "cosmiconfig": "~7.0.0",
+    "cz-conventional-changelog": "~3.3.0",
     "document-register-element": "~1.14.3",
     "dotenv": "~8.2.0",
     "express": "~4.17.1",
@@ -93,8 +92,6 @@
     "fx": "~19.0.1",
     "github-contributors-list": "~1.2.3",
     "glob": "~7.1.4",
-    "graphviz": "~0.0.8",
-    "html-webpack-plugin": "~4.3.0",
     "husky": "^6.0.0",
     "identity-obj-proxy": "~3.0.0",
     "ignore": "~5.1.8",
@@ -110,20 +107,19 @@
     "karma-jasmine": "~3.3.0",
     "karma-jasmine-html-reporter": "~1.5.4",
     "karma-webpack": "~4.0.2",
-    "license-webpack-plugin": "~2.3.0",
     "lint-staged": "^10.5.3",
-    "ng-packagr": "^11.2.0",
+    "jsonc-parser": "3.0.0",
+    "ng-packagr": "^12.0.0",
     "npm-run-all": "~4.1.5",
     "open": "~6.0.0",
     "precise-commits": "~1.0.2",
-    "prettier": "~2.2.0",
+    "prettier": "~2.3.0",
     "pretty-quick": "^2.0.1",
     "release-it": "~13.6.6",
     "rxjs": "~6.6.0",
     "semver": "~7.3.0",
     "shelljs": "~0.8.4",
     "source-map-support": "~0.5.19",
-    "strip-json-comments": "2.0.1",
     "tmp": "~0.2.1",
     "tree-kill": "~1.2.2",
     "ts-loader": "~8.0.1",
@@ -132,15 +128,8 @@
     "tsickle": "~0.38.1",
     "tslib": "~2.0.0",
     "tslint": "~6.1.2",
-    "typescript": "~4.1.0",
-    "verdaccio": "~4.10.0",
-    "webpack": "~4.44.0",
-    "webpack-dev-middleware": "~3.7.0",
-    "webpack-dev-server": "~3.11.0",
-    "webpack-merge": "~5.0.0",
-    "webpack-node-externals": "~2.5.0",
-    "webpack-sources": "~1.4.3",
-    "webpack-subresource-integrity": "~1.4.1",
+    "typescript": "4.2.4",
+    "verdaccio": "~5.1.1",
     "worker-plugin": "~4.0.3",
     "xml2js": "~0.4.23",
     "yargs": "15.4.1",

packages/angular/package.json

@@ -29,7 +29,7 @@
     "migrations": "./migrations.json"
   },
   "dependencies": {
-    "@nrwl/angular": "^12.0.0"
+    "@nrwl/angular": "^12.4.0"
   },
   "peerDependencies": {
     "@nstudio/xplat": "*"

packages/angular/src/schematics/application/_routing_files/src/app/features/home/components/home.component.html

@@ -3,12 +3,9 @@
 
   <h2>Nx</h2>
 
-  An open source toolkit for enterprise Angular applications. Nx is designed to help you create and build enterprise grade
-  Angular applications. It provides an opinionated approach to application project structure and patterns.
+  Nx is a smart and extensible build framework to help you architect, test, and build at any scale — integrating seamlessly with modern technologies and libraries while providing a robust CLI, caching, dependency management, and more.
 
-  <h3>Quick Start & Documentation</h3>
-
-  <a href="https://nx.dev">Watch a 5-minute video on how to get started with Nx.</a>
+  <a href="https://nx.dev">Learn more about Nx.</a>
 
   <h1>{{'welcome' | translate}}!</h1>
   <h3>Try things out</h3>

packages/angular/src/schematics/application/index.ts

@@ -94,15 +94,6 @@ export default function (options: Schema) {
     options.useXplat
       ? (tree: Tree, context: SchematicContext) => adjustAppFiles(options, tree)
       : noop(),
-    // add start/clean scripts
-    (tree: Tree) => {
-      const platformApp = options.name.replace('-', '.');
-      const scripts = {};
-      scripts[
-        `clean`
-      ] = `npx rimraf hooks node_modules package-lock.json && npm i --legacy-peer-deps`;
-      return updatePackageScripts(tree, scripts);
-    },
     <any>formatFiles({ skipFormat: options.skipFormat }),
   ]);
 }
@@ -277,12 +268,9 @@ function appCmpHtml(name: string) {
 
   <h2>Nx</h2>
 
-  An open source toolkit for enterprise Angular applications. Nx is designed to help you create and build enterprise grade
-  Angular applications. It provides an opinionated approach to application project structure and patterns.
-
-  <h3>Quick Start & Documentation</h3>
+  Nx is a smart and extensible build framework to help you architect, test, and build at any scale — integrating seamlessly with modern technologies and libraries while providing a robust CLI, caching, dependency management, and more.
 
-  <a href="https://nrwl.io/nx">Watch a 5-minute video on how to get started with Nx.</a>
+  <a href="https://nx.dev">Learn more about Nx.</a>
 
   <h1>{{'welcome' | translate}}!</h1>
   <h3>Try things out</h3>

packages/angular/src/schematics/application/schema.json

@@ -1,6 +1,6 @@
 {
   "$schema": "http://json-schema.org/schema",
-  "id": "nStudioAngularApplication",
+  "$id": "nStudioAngularApplication",
   "title": "nStudio Angular Application Options Schema",
   "type": "object",
   "properties": {

packages/angular/src/schematics/component/schema.json

@@ -1,6 +1,6 @@
 {
   "$schema": "http://json-schema.org/schema",
-  "id": "angularcomponent",
+  "$id": "angularcomponent",
   "title": "Create an angular component in xplat.",
   "type": "object",
   "properties": {

packages/angular/src/schematics/directive/schema.json

@@ -1,6 +1,6 @@
 {
   "$schema": "http://json-schema.org/schema",
-  "id": "directive",
+  "$id": "directive",
   "title": "Create a directive in xplat.",
   "type": "object",
   "properties": {

packages/angular/src/schematics/elements/schema.json

@@ -1,6 +1,6 @@
 {
   "$schema": "http://json-schema.org/schema",
-  "id": "elements",
+  "$id": "elements",
   "title": "Create custom elements for the web.",
   "type": "object",
   "properties": {

packages/angular/src/schematics/feature/schema.json

@@ -1,6 +1,6 @@
 {
   "$schema": "http://json-schema.org/schema",
-  "id": "feature",
+  "$id": "feature",
   "title": "Create an Angular feature in xplat.",
   "type": "object",
   "properties": {

packages/angular/src/schematics/helpers/index.ts

@@ -3,9 +3,10 @@ import {
   buildHelperChain,
   missingArgument,
 } from '@nstudio/xplat';
-import { prerun, addInstallTask } from '@nstudio/xplat-utils';
+import { prerun } from '@nstudio/xplat-utils';
 import { config as configApplitools } from './applitools';
 import { SchematicsException, chain, noop } from '@angular-devkit/schematics';
+import { addInstallTask } from '@nrwl/workspace';
 
 const supportedHelpers = {
   applitools: configApplitools,
@@ -33,5 +34,5 @@ export default function (options: IHelperSchema) {
     }
   }
 
-  return chain([prerun(<any>options), ...helperChain, addInstallTask(options)]);
+  return chain([prerun(<any>options), ...helperChain, addInstallTask()]);
 }

packages/angular/src/schematics/helpers/schema.json

@@ -1,6 +1,6 @@
 {
   "$schema": "http://json-schema.org/schema",
-  "id": "xplat-angular-helpers",
+  "$id": "xplat-angular-helpers",
   "title": "xplat angular helpers",
   "type": "object",
   "properties": {

packages/angular/src/schematics/ng-add/schema.json

@@ -1,6 +1,6 @@
 {
   "$schema": "http://json-schema.org/schema",
-  "id": "ng-add-angular",
+  "$id": "ng-add-angular",
   "title": "Add xplat angular to Workspace",
   "description": "NOTE: Does not work in the --dry-run mode",
   "type": "object",

packages/angular/src/schematics/ngrx/schema.json

@@ -1,6 +1,6 @@
 {
   "$schema": "http://json-schema.org/schema",
-  "id": "ngrx",
+  "$id": "ngrx",
   "title": "Create ngrx state in xplat.",
   "type": "object",
   "properties": {

packages/angular/src/schematics/pipe/schema.json

@@ -1,6 +1,6 @@
 {
   "$schema": "http://json-schema.org/schema",
-  "id": "pipe",
+  "$id": "pipe",
   "title": "Create a pipe in xplat.",
   "type": "object",
   "properties": {

packages/angular/src/schematics/service/schema.json

@@ -1,6 +1,6 @@
 {
   "$schema": "http://json-schema.org/schema",
-  "id": "service",
+  "$id": "service",
   "title": "Create a service in xplat.",
   "type": "object",
   "properties": {

packages/angular/src/schematics/xplat/_files_core/base/base-component.ts__tmpl__

@@ -5,7 +5,7 @@ import { Subject } from 'rxjs';
 
 @Directive()
 export abstract class BaseComponent implements OnDestroy {
-  private _destroy$: Subject<any>;
+  private _destroy$?: Subject<any>;
 
   get destroy$() {
     if (!this._destroy$) {

packages/angular/src/schematics/xplat/_files_features/ui/base/header.base-component.ts__tmpl__

@@ -9,7 +9,7 @@ export abstract class HeaderBaseComponent extends BaseComponent {
    * These are just samples to give you an idea of what can be done.
    * Change, remove and customize however you'd like!
    */
-  @Input() title: string;
-  @Input() rightButton: string;
+  @Input() title?: string;
+  @Input() rightButton?: string;
   @Output() tappedRight: EventEmitter<boolean> = new EventEmitter();
 }

packages/angular/src/schematics/xplat/_files_utils/objects.ts__tmpl__

@@ -6,25 +6,55 @@ export const isObject = function(arg: any) {
   return arg && typeof arg === 'object';
 };
 
-export function deepMerge<T1, T2>(target: T1, source: T2): T1 & T2 {
+/**
+ * @description Produces a deep clone (no references to original object or child objects) of the provided object or array.
+ */
+ export function deepClone(obj: any): any {
+  const ret: any = Array.isArray(obj) ? [] : {};
+  for (const key in obj) {
+    if (obj[key] === null) {
+      ret[key] = null;
+    } else if (obj[key] instanceof Date) {
+      //typeof date = [object Object], results in empty object.
+      const value = obj[key];
+      ret[key] = new Date(value.valueOf());
+    } else if (typeof obj[key] === 'object') {
+      ret[key] = deepClone(obj[key]);
+    } else {
+      ret[key] = obj[key];
+    }
+  }
+  return ret;
+}
+
+/**
+ * @description Merge object 2 into object 1 recursively. 
+ * This differs from Object.assign() in that child objects are not references to the original.
+ * Child objects / arrays that are present in each object are merged.
+ * Returns the result, treats object 1 / 2 as immutable since there is no guarantee they are not.
+ */
+export function deepMerge(obj1: any, obj2: any): any {
   const result: any = {};
-  Object.entries(target).forEach(([key, value]) => {
-    if (key in source) {
+  if (obj1 === null) {
+    return obj2 === null ? null : deepClone(obj2);
+  }
+  Object.entries(obj1).forEach(([key, value]) => {
+    if (key in obj2) {
       // potential overwrite
-      if (typeof value !== typeof source[key]) {
-        // value type mismatch, always take source values.
-        result[key] = source[key];
-      } else if (isObject(value)) {
-        result[key] = deepMerge(value, source[key]);
+      if (typeof value !== typeof obj2[key]) {
+        // value type mismatch, always take obj2's values.
+        result[key] = obj2[key];
+      } else if (typeof value == 'object') {
+        result[key] = deepMerge(value, obj2[key]);
       } else {
-        result[key] = source[key];
+        result[key] = obj2[key];
       }
     } else {
       result[key] = value;
     }
   });
-  Object.entries(source)
-    .filter(([key]) => !(key in target))
+  Object.entries(obj2)
+    .filter(([key]) => !(key in obj1))
     .forEach(([key, value]) => {
       result[key] = value;
     });