fix(schematics): update to new CLI api (#190)

.vscode/settings.json

@@ -1 +1,3 @@
-{}
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

package.json

@@ -52,7 +52,7 @@
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-angular": "^11.0.0",
     "@fortawesome/fontawesome-free": "^5.15.1",
-    "@schematics/angular": "^10.2.1",
+    "@schematics/angular": "^11.0.6",
     "@types/fs-extra": "^9.0.6",
     "chalk": "^4.1.0",
     "classlist.js": "^1.1.20150312",

projects/ng-aquila/src/package.json

@@ -7,11 +7,11 @@
   },
   "license": "MIT",
   "peerDependencies": {
-    "@angular/core": "^10.0.0",
-    "@angular/common": "^10.0.0",
-    "@angular/cdk": "^10.0.0",
-    "@angular/animations": "^10.0.0",
-    "@angular/router": "^10.0.0",
+    "@angular/core": "^11.0.0",
+    "@angular/common": "^11.0.0",
+    "@angular/cdk": "^11.0.0",
+    "@angular/animations": "^11.0.0",
+    "@angular/router": "^11.0.0",
     "moment": "^2.22.2",
     "object-fit-images": "^3.2.3",
     "iban": "^0.0.12",

projects/ng-aquila/src/schematics/ng-add/index.spec.ts

@@ -1,29 +1,31 @@
 import { SchematicTestSetup, Collection } from '../utils/testing/test-setup';
-import { getWorkspace } from '@schematics/angular/utility/config';
+import { getWorkspace } from '@schematics/angular/utility/workspace';
 import { getProjectFromWorkspace } from '@angular/cdk/schematics';
+import { ProjectDefinition } from '@angular-devkit/core/src/workspace';
+import { isJsonArray } from '@angular-devkit/core';
 
 describe('ng-aquila ng add', () => {
   const testSetup = new SchematicTestSetup('ng-add-setup-project', Collection.SCHEMATICS);
-  let testProjectConfig: any;
+  let testProjectConfig: ProjectDefinition;
 
-  function getTestProjectConfig() {
-    const workspace = getWorkspace(testSetup.appTree);
+  async function getTestProjectConfig() {
+    const workspace = await getWorkspace(testSetup.appTree);
     return getProjectFromWorkspace(workspace, 'aquila-testing');
   }
 
   describe('general and b2c', () => {
     beforeEach(async () => {
       await testSetup.runMigration();
-      testProjectConfig = getTestProjectConfig();
+      testProjectConfig = await getTestProjectConfig();
     });
 
     it('should add normalize.css', async () => {
-      expect(testProjectConfig.architect!.build.options.styles).toContain('node_modules/@aposin/ng-aquila/css/normalize.css');
+      expect(testProjectConfig.targets?.get('build')?.options?.styles).toContain('node_modules/@aposin/ng-aquila/css/normalize.css');
     });
 
     it('should add aposin theme', async () => {
-      expect(testProjectConfig.architect!.build.options.styles).toContain('node_modules/@aposin/ng-aquila/themes/aposin.css');
-      expect(testProjectConfig.architect!.build.options.styles).not.toContain('node_modules/@aposin/ng-aquila/themes/expert.css');
+      expect(testProjectConfig.targets?.get('build')?.options?.styles).toContain('node_modules/@aposin/ng-aquila/themes/aposin.css');
+      expect(testProjectConfig.targets?.get('build')?.options?.styles).not.toContain('node_modules/@aposin/ng-aquila/themes/expert.css');
     });
 
     it('should add CDK styles', async () => {
@@ -41,12 +43,12 @@ describe('ng-aquila ng add', () => {
   describe('expert', () => {
     beforeEach(async () => {
       await testSetup.runMigration({ type: 'b2b' });
-      testProjectConfig = getTestProjectConfig();
+      testProjectConfig = await getTestProjectConfig();
     });
 
     it('should add expert theme', async () => {
-      expect(testProjectConfig.architect!.build.options.styles).not.toContain('node_modules/@aposin/ng-aquila/themes/aposin.css');
-      expect(testProjectConfig.architect!.build.options.styles).toContain('node_modules/@aposin/ng-aquila/themes/expert.css');
+      expect(testProjectConfig.targets.get('build')?.options?.styles).not.toContain('node_modules/@aposin/ng-aquila/themes/aposin.css');
+      expect(testProjectConfig.targets.get('build')?.options?.styles).toContain('node_modules/@aposin/ng-aquila/themes/expert.css');
     });
 
     it('should add Expert Module', async () => {
@@ -57,11 +59,11 @@ describe('ng-aquila ng add', () => {
   describe('no theme', () => {
     beforeEach(async () => {
       await testSetup.runMigration({ type: 'b2c', noTheme: true });
-      testProjectConfig = getTestProjectConfig();
+      testProjectConfig = await getTestProjectConfig();
     });
 
     it('should not add a theme file if no-theme is set to true', () => {
-      expect(testProjectConfig.architect!.build.options.styles).not.toContain('node_modules/@aposin/ng-aquila/themes/aposin.css');
+      expect(testProjectConfig.targets.get('build')?.options?.styles).not.toContain('node_modules/@aposin/ng-aquila/themes/aposin.css');
     });
   });
 });

projects/ng-aquila/src/schematics/ng-add/index.ts

@@ -14,7 +14,7 @@ import { aquilaVersion } from './version-names';
 
 export default function (options: Schema): Rule {
   return (host: Tree, context: SchematicContext) => {
-    addPackageToPackageJson(host, '@aposin/ng-aquila', `${aquilaVersion}`);
+    addPackageToPackageJson(host, '@aposin/ng-aquila', `^${aquilaVersion}`);
     // the angular cli just adds `@aposin/ng-aquila` to the package.json but it is not installed
     // yet so we run the install first before we install the peer dependencies
     const installTaskId = context.addTask(new NodePackageInstallTask());

projects/ng-aquila/src/schematics/ng-add/setup-project.ts

@@ -7,11 +7,12 @@ import {
 } from '@angular/cdk/schematics';
 import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';
 import * as chalk from 'chalk';
-import { getWorkspace } from '@schematics/angular/utility/config';
+import { getWorkspace, updateWorkspace } from '@schematics/angular/utility/workspace';
 import { Schema } from './schema';
+import { JsonArray } from '@angular-devkit/core';
 
 export default function (options: Schema): Rule {
-  return (host: Tree, context: SchematicContext) => {
+  return async (host: Tree, context: SchematicContext) => {
     const installTaskId = context.addTask(new NodePackageInstallTask());
     return chain([
       options && options.type && options.type === 'b2b' ? addExpertModule(options) : noop(),
@@ -24,38 +25,36 @@ export default function (options: Schema): Rule {
 }
 
 function addExpertModule(options: Schema) {
-  return (host: Tree) => {
-    const workspace = getWorkspace(host);
+  return async (host: Tree) => {
+    const workspace = await getWorkspace(host);
     const project = getProjectFromWorkspace(workspace, options.project);
     addModuleImportToRootModule(host, 'NxExpertModule',
       '@aposin/ng-aquila/config', project);
-    return host;
   };
 }
 
 function addAposinTheme(options: Schema) {
-  return (host: Tree) => {
+  return async (host: Tree) => {
     if (options.noTheme) {
-      return host;
+      return;
     }
 
-    const workspace = getWorkspace(host);
+    const workspace = await getWorkspace(host);
     const project = getProjectFromWorkspace(workspace, options.project);
     const newFilePath = 'node_modules/@aposin/ng-aquila/css/normalize.css';
 
     const buildOptions = getProjectTargetOptions(project, 'build');
-    if (!buildOptions.styles) {
-      buildOptions.styles = [newFilePath];
-    } else if (!buildOptions.styles.includes(newFilePath)) {
-      buildOptions.styles.push(newFilePath);
+    let styles = buildOptions.styles as JsonArray;
+    if (!styles) {
+      styles = [newFilePath];
+    } else if (!styles.includes(newFilePath)) {
+      styles.push(newFilePath);
     }
 
     const themeToAdd = options.type === 'b2b' ? 'expert.css' : 'aposin.css';
-    buildOptions.styles.push(`node_modules/@aposin/ng-aquila/themes/${themeToAdd}`);
-
-    host.overwrite('angular.json', JSON.stringify(workspace, null, 2));
+    styles.push(`node_modules/@aposin/ng-aquila/themes/${themeToAdd}`);
 
-    return host;
+    return updateWorkspace(workspace);
   };
 }
 
@@ -68,8 +67,8 @@ function addCdkA11yStyles(options: Schema) {
 }
 
 function addStyles(options: Schema, path: string, importString: string) {
-  return (host: Tree) => {
-    const workspace = getWorkspace(host);
+  return async (host: Tree) => {
+    const workspace = await getWorkspace(host);
     const project = getProjectFromWorkspace(workspace, options.project);
     const styleFilePath = getProjectStyleFile(project);
 
@@ -104,16 +103,16 @@ function addStyles(options: Schema, path: string, importString: string) {
 }
 
 export function addPonyfillToPolyfills(options: Schema) {
-  return (host: Tree) => {
-    const workspace = getWorkspace(host);
+  return async (host: Tree) => {
+    const workspace = await getWorkspace(host);
     const project = getProjectFromWorkspace(workspace, options.project);
     const buildOptions = getProjectTargetOptions(project, 'build');
 
     if (!buildOptions.polyfills) {
       throw new Error(`Could not find polyfills.ts in ${project.sourceRoot}`);
     }
 
-    const polyfillsTs = buildOptions.polyfills;
+    const polyfillsTs = buildOptions.polyfills as string;
     const polyfillsFile = host.read(polyfillsTs);
 
     if (!polyfillsFile) {