feat(core): Nx 12 compat + dep updates + {N} 8 compat

package.json

@@ -6,7 +6,7 @@
   "private": true,
   "scripts": {
     "build": "./scripts/package.sh --local",
-    "clean": "npx rimraf package-lock.json node_modules",
+    "clean": "npx rimraf package-lock.json node_modules && npm install --legacy-peer-deps",
     "commit": "git-cz",
     "checkcommit": "node ./scripts/commit-lint.js",
     "e2e": "./scripts/e2e.sh",
@@ -33,35 +33,39 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@angular-devkit/architect": "~0.1100.1",
-    "@angular-devkit/build-angular": "~0.1100.1",
-    "@angular-devkit/build-optimizer": "~0.1100.1",
-    "@angular-devkit/build-webpack": "~0.1100.1",
-    "@angular-devkit/core": "~11.0.1",
-    "@angular-devkit/schematics": "~11.0.1",
-    "@angular-eslint/eslint-plugin": "~1.0.0",
-    "@angular-eslint/eslint-plugin-template": "~1.0.0",
-    "@angular-eslint/template-parser": "~1.0.0",
-    "@angular/cli": "~11.0.1",
-    "@angular/common": "~11.0.0",
-    "@angular/compiler": "~11.0.0",
-    "@angular/compiler-cli": "~11.0.0",
-    "@angular/core": "~11.0.0",
-    "@angular/forms": "~11.0.0",
-    "@angular/platform-browser": "~11.0.0",
-    "@angular/platform-browser-dynamic": "~11.0.0",
-    "@angular/router": "~11.0.0",
-    "@angular/service-worker": "~11.0.0",
-    "@angular/upgrade": "~11.0.0",
+    "@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",
     "@cypress/webpack-preprocessor": "^5.4.2",
-    "@nrwl/angular": "~11.1.0",
-    "@nrwl/express": "~11.1.0",
-    "@nrwl/nest": "~11.1.0",
-    "@nrwl/node": "~11.1.0",
-    "@nrwl/react": "~11.1.0",
-    "@nrwl/web": "~11.1.0",
-    "@nrwl/workspace": "~11.1.0",
-    "@schematics/angular": "~11.1.0",
+    "@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",
     "@types/express": "~4.17.0",
     "@types/jasmine": "~3.5.11",
     "@types/jasminewd2": "~2.0.3",
@@ -107,18 +111,18 @@
     "karma-webpack": "~4.0.2",
     "license-webpack-plugin": "~2.3.0",
     "lint-staged": "^10.5.3",
-    "ng-packagr": "^11.1.2",
+    "ng-packagr": "^11.2.0",
     "npm-run-all": "~4.1.5",
     "open": "~6.0.0",
     "precise-commits": "~1.0.2",
-    "prettier": "~2.0.0",
+    "prettier": "~2.2.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": "~3.1.1",
+    "strip-json-comments": "2.0.1",
     "tmp": "~0.2.1",
     "tree-kill": "~1.2.2",
     "ts-loader": "~8.0.1",
@@ -127,7 +131,7 @@
     "tsickle": "~0.38.1",
     "tslib": "~2.0.0",
     "tslint": "~6.1.2",
-    "typescript": "~4.0.0",
+    "typescript": "~4.1.0",
     "verdaccio": "~4.10.0",
     "webpack": "~4.44.0",
     "webpack-dev-middleware": "~3.7.0",

packages/angular/package.json

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

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

@@ -42,6 +42,10 @@ describe('app', () => {
     ).toBeTruthy();
     expect(tree.exists('/libs/xplat/web/scss/src/_index.scss')).toBeTruthy();
     expect(tree.exists('/libs/xplat/web/scss/src/package.json')).toBeTruthy();
+
+    // let checkPath = 'angular.json'
+    // let checkFile = getFileContent(tree, checkPath);
+    // console.log(checkPath, checkFile)
   });
 
   it('should create all files for web app using groupByName', async () => {

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

@@ -14,7 +14,7 @@ import {
   noop,
   ExecutionOptions,
 } from '@angular-devkit/schematics';
-import { formatFiles, updateWorkspace } from '@nrwl/workspace';
+import { formatFiles, updateWorkspace, getWorkspace } from '@nrwl/workspace';
 import {
   stringUtils,
   updatePackageScripts,
@@ -100,7 +100,7 @@ export default function (options: Schema) {
       const scripts = {};
       scripts[
         `clean`
-      ] = `npx rimraf hooks node_modules package-lock.json && npm i`;
+      ] = `npx rimraf hooks node_modules package-lock.json && npm i --legacy-peer-deps`;
       return updatePackageScripts(tree, scripts);
     },
     <any>formatFiles({ skipFormat: options.skipFormat }),
@@ -175,7 +175,7 @@ function addAppFiles(options: Schema, extra: string = ''): Rule {
   );
 }
 
-function adjustAppFiles(options: Schema, tree: Tree): Rule {
+async function adjustAppFiles(options: Schema, tree: Tree): Promise<Rule> {
   const directory = options.directory ? `${options.directory}/` : '';
   tree.overwrite(
     `/apps/${directory}${options.name}/src/index.html`,
@@ -215,22 +215,23 @@ function adjustAppFiles(options: Schema, tree: Tree): Rule {
     appModuleContent(options)
   );
   // update cli config for shared web specific scss
-  return updateWorkspace((workspace) => {
-    const projectDef = workspace.projects.get(options.name);
-    if (projectDef && projectDef.targets) {
-      const buildDef = projectDef.targets.get('build');
-      if (buildDef) {
-        buildDef.options.styles = [
-          `libs/xplat/${XplatHelpers.getXplatFoldername(
-            'web',
-            'angular'
-          )}/scss/src/_index.scss`,
-          `apps/${directory}${options.name}/src/styles.scss`,
-        ];
-        projectDef.targets.set('build', buildDef);
-      }
+
+  const workspace = await getWorkspace(tree);
+  const project = workspace.projects.get(options.name);
+  if (project && project.targets) {
+    const buildOptions = project.targets.get('build').options;
+    if (buildOptions) {
+      project.targets.get('build').options.styles = [
+        `libs/xplat/${XplatHelpers.getXplatFoldername(
+          'web',
+          'angular'
+        )}/scss/src/_index.scss`,
+        `apps/${directory}${options.name}/src/styles.scss`,
+      ];
     }
-  });
+  }
+
+  return updateWorkspace(workspace);
 }
 
 function indexContent(name: string) {
@@ -397,9 +398,6 @@ describe('AppComponent', () => {
 function appModuleContent(options) {
   return `import { NgModule } from '@angular/core';
 
-// libs
-import { environment } from '@${getNpmScope()}/xplat/core';
-
 // app
 import { CoreModule } from './core/core.module';
 import { SharedModule } from './features/shared/shared.module';

packages/angular/src/schematics/xplat/_files_core/environments/base/index.ts__tmpl__

@@ -1,3 +1,2 @@
 export * from './environment.base';
-export * from './environment.dev';
 export * from './environment.prod';

packages/angular/src/schematics/xplat/_files_core/services/window.service.ts__tmpl__

@@ -30,7 +30,7 @@ export class WindowService {
     return this._platformWindow.require;
   }
 
-  public alert(msg: any): Promise<any> {
+  public alert(msg: any): Promise<void> {
     return new Promise((resolve, reject) => {
       const result: any = this._platformWindow.alert(msg);
       if (isObject(result) && result.then) {
@@ -45,7 +45,7 @@ export class WindowService {
   public confirm(
     msg: any,
     action?: Function /* used for fancyalerts on mobile*/
-  ): Promise<any> {
+  ): Promise<boolean> {
     return new Promise((resolve, reject) => {
       const result: any = (<any>this._platformWindow).confirm(
         msg,
@@ -54,7 +54,7 @@ export class WindowService {
       if (isObject(result) && result.then) {
         result.then(resolve, reject);
       } else if (result) {
-        resolve();
+        resolve(true);
       } else {
         reject();
       }

packages/angular/src/schematics/xplat/_files_scss/_variables.scss

@@ -4,4 +4,4 @@
  */
 
 // could use a base theme here, for example:
-// @import '~@angular/material/theming';
+// @import '@angular/material/theming';

packages/angular/src/utils/versions.ts

@@ -1,13 +1,13 @@
 export const xplatVersion = '*';
-export const nxVersion = '^11.1.0';
-export const angularVersion = '~11.1.0';
-export const angularDevkitVersion = '~0.1101.0';
+export const nxVersion = '^12.0.0';
+export const angularVersion = '~11.2.0';
+export const angularDevkitVersion = '~0.1102.0';
 export const ngxTranslateVersion = '~13.0.0';
 export const ngxTranslateHttpVersion = '~6.0.0';
 export const coreJsVersion = '^3.6.5';
 export const rxjsVersion = '~6.6.0';
 export const zonejsVersion = '~0.11.1';
 export const codelyzerVersion = '~6.0.0';
 export const jestJasmine2 = '~25.2.0';
-export const jestPresetAngular = '8.3.1';
-export const typesJest = '~25.1.4';
+export const jestPresetAngular = '8.2.1';
+export const typesJest = '~26.0.0';

packages/electron-angular/src/utils/versions.ts

@@ -1,2 +1,2 @@
 export const xplatVersion = '*';
-export const nxVersion = '^11.1.0';
+export const nxVersion = '^12.0.0';

packages/focus/package.json

@@ -30,8 +30,8 @@
     "migrations": "./migrations.json"
   },
   "dependencies": {
-    "@angular-devkit/core": "~11.1.0",
-    "@angular-devkit/schematics": "~11.1.0",
+    "@angular-devkit/core": "~11.2.0",
+    "@angular-devkit/schematics": "~11.2.0",
     "@nstudio/xplat-utils": "*",
     "xml2js": "~0.4.23"
   }

packages/ionic-angular/src/schematics/application/_files/src/global.scss

@@ -12,4 +12,4 @@
 // To declare rules for a specific mode, create a child rule for the .md, .ios,
 // or .wp mode classes. The mode class is automatically applied to the <body>
 // element in the app.
-@import '~@<%= npmScope %>/xplat-ionic-scss/index';
+@import '@<%= npmScope %>/xplat-ionic-scss/index';

packages/ionic-angular/src/schematics/application/_skipxplat_files/src/global.scss

@@ -10,17 +10,17 @@
  */
 
 /* Core CSS required for Ionic components to work properly */
-@import '~@ionic/angular/css/core.css';
+@import '@ionic/angular/css/core.css';
 
 /* Basic CSS for apps built with Ionic */
-@import '~@ionic/angular/css/normalize.css';
-@import '~@ionic/angular/css/structure.css';
-@import '~@ionic/angular/css/typography.css';
-@import '~@ionic/angular/css/display.css';
+@import '@ionic/angular/css/normalize.css';
+@import '@ionic/angular/css/structure.css';
+@import '@ionic/angular/css/typography.css';
+@import '@ionic/angular/css/display.css';
 
 /* Optional CSS utils that can be commented out */
-@import '~@ionic/angular/css/padding.css';
-@import '~@ionic/angular/css/float-elements.css';
-@import '~@ionic/angular/css/text-alignment.css';
-@import '~@ionic/angular/css/text-transformation.css';
-@import '~@ionic/angular/css/flex-utils.css';
+@import '@ionic/angular/css/padding.css';
+@import '@ionic/angular/css/float-elements.css';
+@import '@ionic/angular/css/text-alignment.css';
+@import '@ionic/angular/css/text-transformation.css';
+@import '@ionic/angular/css/flex-utils.css';

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

@@ -79,7 +79,7 @@ export default function (options: ApplicationOptions) {
       // ensure convenient clean script is added for workspace
       scripts[
         `clean`
-      ] = `npx rimraf -- hooks node_modules package-lock.json && npm i`;
+      ] = `npx rimraf hooks node_modules package-lock.json && npm i --legacy-peer-deps`;
       // add convenient ionic scripts
       scripts[`build.${platformApp}`] = `nx build ${options.name}`;
       scripts[
@@ -102,7 +102,7 @@ export default function (options: ApplicationOptions) {
       ] = `cd apps/${directory}${options.name} && npm run cap.copy`;
       scripts[
         `clean.${platformApp}`
-      ] = `cd apps/${directory}${options.name} && npx rimraf -- hooks node_modules platforms www plugins package-lock.json && npm i && rimraf -- package-lock.json`;
+      ] = `cd apps/${directory}${options.name} && npx rimraf hooks node_modules platforms www plugins package-lock.json && npm i --legacy-peer-deps && npx rimraf -- package-lock.json`;
       return updatePackageScripts(tree, scripts);
     },
     (tree: Tree, context: SchematicContext) => {

packages/ionic-angular/src/schematics/xplat/_files_scss/_index.scss

@@ -1,23 +1,23 @@
 // shared across all web based platforms and apps
-@import '~@<%= npmScope %>/xplat-web-scss/index';
+@import '@<%= npmScope %>/xplat-web-scss/index';
 
 // http://ionicframework.com/docs/theming/
 
 /* Core CSS required for Ionic components to work properly */
-@import '~@ionic/angular/css/core.css';
+@import '@ionic/angular/css/core.css';
 
 /* Basic CSS for apps built with Ionic */
-@import '~@ionic/angular/css/normalize.css';
-@import '~@ionic/angular/css/structure.css';
-@import '~@ionic/angular/css/typography.css';
-@import '~@ionic/angular/css/display.css';
+@import '@ionic/angular/css/normalize.css';
+@import '@ionic/angular/css/structure.css';
+@import '@ionic/angular/css/typography.css';
+@import '@ionic/angular/css/display.css';
 
 /* Optional CSS utils that can be commented out */
-@import '~@ionic/angular/css/padding.css';
-@import '~@ionic/angular/css/float-elements.css';
-@import '~@ionic/angular/css/text-alignment.css';
-@import '~@ionic/angular/css/text-transformation.css';
-@import '~@ionic/angular/css/flex-utils.css';
+@import '@ionic/angular/css/padding.css';
+@import '@ionic/angular/css/float-elements.css';
+@import '@ionic/angular/css/text-alignment.css';
+@import '@ionic/angular/css/text-transformation.css';
+@import '@ionic/angular/css/flex-utils.css';
 
 /**
  * The following are Ionic specific

packages/ionic-angular/src/utils/versions.ts

@@ -5,8 +5,8 @@ export const ionicNativeVersion = '~5.30.0';
 export const capacitorVersion = '~2.4.5';
 export const ngDevKitArchitect = '~0.1101.0';
 export const ngDevKitBuild = '~0.1101.0';
-export const ngDevKitCore = '~11.1.0';
-export const ngDevKitSchematics = '~11.1.0';
+export const ngDevKitCore = '~11.2.0';
+export const ngDevKitSchematics = '~11.2.0';
 
 export const jasmineCoreVersion = '~3.6.0';
 export const jasmineSpecVersion = '~6.0.0';
@@ -17,7 +17,7 @@ export const karmaJasmineVersion = '~4.0.1';
 export const karmaJasmineHtmlVersion = '^1.5.2';
 export const typescriptVersion = '~4.0.0';
 
-export const angularVersion = '~11.1.0';
+export const angularVersion = '~11.2.0';
 export const angularDevkitVersion = '~0.1101.0';
 export const ngxTranslateVersion = '~13.0.0';
 export const ngxTranslateHttpVersion = '~6.0.0';