fix(schematics): fix schematics after npm testing (#6211)

Author: SvetlanaMuravlova

libs/common-docs/src/lib/common/schematics/schematics.component.html

@@ -28,7 +28,7 @@ <h2 id="getting-started">
       <p>When you install ngx-bootstrap with Angular Cli Schematics you will get such updates:</p>
       <ul id="installation">
         <li><p><code>package.json</code></p>
-          <p>List of dependencies will be updated with 2 new packages <code>"bootstrap": "^4.5.0"</code>, <code>"ngx-bootstrap": "7.0.0-rc.1"</code>. After packages will be installed and node_modules folder will be updated also.</p>
+          <p>List of dependencies will be updated with 2 new packages <code>"bootstrap": "^4.5.3"</code>, <code>"ngx-bootstrap": "7.0.0"</code>. After packages will be installed and node_modules folder will be updated also.</p>
         </li>
         <li id="style_updates"><p>Depending on which style extension is used in the project, schematics will add necessary imports or styles links. It, as expected, allows the use SCSS or CSS extensions.</p>
           <p>In case CSS extension - <code>angular.json</code> file will be updated.</p>

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

@@ -9,27 +9,24 @@ import { getFileContent } from '@schematics/angular/utility/test';
 import { SchematicTestRunner } from '@angular-devkit/schematics/testing';
 import { Tree } from '@angular-devkit/schematics';
 
-import {
-  createTestApp,
-  getProjectFromWorkSpace, getProjectTargetOptions,
-  removePackageJsonDependency,
-  getWorkspace
-} from '../utils';
+import { createTestApp, getProjectTargetOptions, removePackageJsonDependency } from '../utils';
 
 import * as path from 'path';
-import { WorkspaceProject } from '@schematics/angular/utility/workspace-models';
 import { getProjectMainFile } from '../utils/project-main-file';
 import { getAppModulePath } from '@schematics/angular/utility/ng-ast-utils';
 import { checkComponentName } from './index';
+import { getWorkspace } from '@schematics/angular/utility/workspace';
+import { workspaces } from '@angular-devkit/core';
 
 const defaultOptions = {
   component: 'carousel'
 };
 
-export function expectProjectStyleFile(project: WorkspaceProject, filePath: string) {
+export function expectProjectStyleFile(project: workspaces.ProjectDefinition, filePath: string) {
   expect(getProjectTargetOptions(project, 'build').styles).toContain(filePath);
 }
 
+
 describe('ng-add schematic', () => {
   let runner: SchematicTestRunner;
   let appTree: Tree;
@@ -63,7 +60,8 @@ describe('ng-add schematic', () => {
       .toPromise();
 
     const workspace = await getWorkspace(tree);
-    const project = getProjectFromWorkSpace(workspace);
+    const projectName = workspace.extensions.defaultProject !.toString();
+    const project = workspace.projects.get(projectName);
 
     expectProjectStyleFile(project, './node_modules/bootstrap/dist/css/bootstrap.min.css');
   });
@@ -74,7 +72,8 @@ describe('ng-add schematic', () => {
       .runSchematicAsync('ng-add', options, appTree)
       .toPromise();
     const workspace = await getWorkspace(tree);
-    const project = getProjectFromWorkSpace(workspace);
+    const projectName = workspace.extensions.defaultProject !.toString();
+    const project = workspace.projects.get(projectName);
     const content = tree.readContent(getAppModulePath(tree, getProjectMainFile(project)));
     expect(checkComponentName(options.component)).toBeTruthy();
     expect(content).toBeTruthy();

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

@@ -5,17 +5,17 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-
+import { workspaces } from '@angular-devkit/core';
 import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
 import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';
 import { getAppModulePath } from '@schematics/angular/utility/ng-ast-utils';
-import { addModuleImportToRootModule, addPackageToPackageJson, getProjectFromWorkSpace, getWorkspace } from '../utils';
+import { addModuleImportToRootModule, addPackageToPackageJson } from '../utils';
 import { hasNgModuleImport } from '../utils/ng-module-imports';
 import { getProjectMainFile } from '../utils/project-main-file';
 import { Schema } from './schema';
-import { WorkspaceProject } from '@schematics/angular/utility/workspace-models';
 import { addStyles } from '../utils/addStyles';
 import { getDependencies } from '../utils/getVersions';
+import { getWorkspace } from '@schematics/angular/utility/workspace';
 
 const datepickerComponentName = 'datepicker';
 const bsName = 'ngx-bootstrap';
@@ -59,28 +59,28 @@ export default function addBsToPackage(options: Schema): Rule {
     ? options.component
     : options['--'] && options['--'][1];
 
-  return (tree: Tree, context: SchematicContext) => {
-    const workspace = getWorkspace(tree) as any;
-    const projectName = options.project ? options.project : Object.keys(workspace.projects)[0];
-    const projectWorkspace = getProjectFromWorkSpace(workspace, projectName);
+  return async (tree: Tree, context: SchematicContext) => {
+    const workspace = await getWorkspace(tree);
+    const projectName = options.project || workspace.extensions.defaultProject !.toString();
+    const project = workspace.projects.get(projectName);
 
     addPackageJsonDependencies(tree, context);
-    if (!componentName || componentName === datepickerComponentName) {
-      insertCommonStyles(projectWorkspace, tree, projectName, options.stylesExtension);
+    if (!componentName || componentName === datepickerComponentName || !components[componentName]) {
+      insertCommonStyles(project, tree, projectName, options.stylesExtension);
     } else {
-      insertBootstrapStyles(projectWorkspace, tree, projectName, options.stylesExtension);
+      insertBootstrapStyles(project, tree, projectName, options.stylesExtension);
     }
 
     context.addTask(new NodePackageInstallTask());
     if (componentName) {
-      addModuleOfComponent(projectWorkspace, tree, context, componentName);
+      addModuleOfComponent(project, tree, context, componentName);
     }
 
-    addAnimationModule(projectWorkspace, tree, context, componentName);
+    addAnimationModule(project, tree, context, componentName);
   };
 }
 
-function addModuleOfComponent(project: WorkspaceProject, host: Tree, context: SchematicContext, componentName: string): Rule {
+function addModuleOfComponent(project: workspaces.ProjectDefinition, host: Tree, context: SchematicContext, componentName: string): Rule {
   if (!project) {
     return;
   }
@@ -106,15 +106,15 @@ function addPackageJsonDependencies(host: Tree, context: SchematicContext): Tree
   return host;
 }
 
-function insertBootstrapStyles(project: WorkspaceProject, host: Tree, projectName: string, extension?: string ): Tree {
+function insertBootstrapStyles(project: workspaces.ProjectDefinition, host: Tree, projectName: string, extension?: string ): Tree {
   if (!project) {
     return;
   }
 
   return addStyles(project, 'build', host, BOOTSTRAP_AVAILABLE_STYLES, projectName, extension);
 }
 
-function insertCommonStyles(project: WorkspaceProject, host: Tree, projectName: string, extension?: string): Tree {
+function insertCommonStyles(project: workspaces.ProjectDefinition, host: Tree, projectName: string, extension?: string): Tree {
   if (!project) {
     return;
   }
@@ -123,7 +123,7 @@ function insertCommonStyles(project: WorkspaceProject, host: Tree, projectName:
   return addStyles(project, 'build', host, DATEPICKER_AVAILABLESTYLES, projectName, extension);
 }
 
-function addAnimationModule(project: WorkspaceProject, host: Tree, context: SchematicContext, componentName: string): Rule {
+function addAnimationModule(project: workspaces.ProjectDefinition, host: Tree, context: SchematicContext, componentName: string): Rule {
   if (!project || !(!componentName || components[componentName]?.animated)) {
     return;
   }

src/schematics/src/utils/addStyles.ts

@@ -1,12 +1,7 @@
-import {
-  BrowserBuilderOptions,
-  TestBuilderOptions,
-  WorkspaceProject
-} from '@schematics/angular/utility/workspace-models';
 import { Tree } from '@angular-devkit/schematics';
-import { JsonArray } from '@angular-devkit/core';
+import { JsonArray, JsonObject, workspaces } from '@angular-devkit/core';
 import { getProjectStyleFile } from './getVersions';
-import { getProjectTargetName, getProjectTargetOptions } from './index';
+import { getProjectTargetOptions } from './index';
 import path = require('path');
 
 const DEFAULT_STYLE_EXTENSION = 'css';
@@ -15,7 +10,7 @@ interface availablePaths {
   'css': string[];
   'scss': string[];
 }
-export function addStyles(project: WorkspaceProject, targetName: string, host: Tree, availableAssetPaths: availablePaths, projectName: string, extension?: string): Tree {
+export function addStyles(project: workspaces.ProjectDefinition, targetName: string, host: Tree, availableAssetPaths: availablePaths, projectName: string, extension?: string): Tree {
     let targetOptions = getProjectTargetOptions(project, targetName);
     const styles = (targetOptions.styles as JsonArray | undefined);
     if (!styles || (styles instanceof Array && !styles.length)) {
@@ -43,14 +38,14 @@ export function addStyles(project: WorkspaceProject, targetName: string, host: T
     return host;
 }
 
-function addStylesPathsToTargetOptions(targetOptions: BrowserBuilderOptions | TestBuilderOptions, existingStyles: string[], stylePatch: string): BrowserBuilderOptions | TestBuilderOptions {
+function addStylesPathsToTargetOptions(targetOptions: any, existingStyles: string[], stylePatch: string): Record<string, string | number | boolean | JsonArray | JsonObject> {
   if (!existingStyles.some(path => path === stylePatch)) {
-    targetOptions.styles.unshift(stylePatch);
+    targetOptions.styles?.unshift?.(stylePatch);
   }
   return targetOptions;
 }
 
-function addEmptyStyles(targetOptions: BrowserBuilderOptions | TestBuilderOptions, extension: string, availableAssetPaths: availablePaths) {
+function addEmptyStyles(targetOptions: Record<string, string | number | boolean | JsonArray | JsonObject>, extension: string, availableAssetPaths: availablePaths) {
   targetOptions.styles = availableAssetPaths[DEFAULT_STYLE_EXTENSION];
   return targetOptions;
 }
@@ -66,10 +61,16 @@ function addImportToStylesFile(host: Tree, styleFilePath: string, styleFilePatch
   return host;
 }
 
-function setUpdatedTargetOptions(host: Tree, project: WorkspaceProject, targetOptions: BrowserBuilderOptions | TestBuilderOptions, targetName: string, projectName: string): Tree {
+function setUpdatedTargetOptions(host: Tree, project: workspaces.ProjectDefinition, targetOptions: Record<string, string | number | boolean | JsonArray | JsonObject>, targetName: string, projectName: string): Tree {
   if (host.exists('angular.json')) {
     const currentAngular = JSON.parse(host.read('angular.json')!.toString('utf-8'));
-    currentAngular['projects'][projectName][getProjectTargetName(project)][targetName]['options'] = targetOptions;
+    if (currentAngular['projects'][projectName].targets) {
+      currentAngular['projects'][projectName].targets[targetName]['options'] = targetOptions;
+    }
+
+    if (currentAngular['projects'][projectName].architect) {
+      currentAngular['projects'][projectName].architect[targetName]['options'] = targetOptions;
+    }
     host.overwrite('angular.json', JSON.stringify(currentAngular, null, 2));
   }
   return host;

src/schematics/src/utils/current_dependency_versions.json

@@ -1,4 +1,4 @@
 {
   "NGX_BOOTSTRAP_VERSION": "7.0.0-rc.4",
-  "BOOTSTRAP_VERSION": "^4.5.0"
+  "BOOTSTRAP_VERSION": "^4.5.3"
 }

src/schematics/src/utils/index.ts

@@ -13,43 +13,17 @@ import { getAppModulePath } from '@schematics/angular/utility/ng-ast-utils';
 import { getFileContent } from '@schematics/angular/utility/test';
 import * as ts from 'typescript';
 import { getProjectMainFile } from './project-main-file';
-import {
-  BrowserBuilderOptions,
-  TestBuilderOptions,
-  WorkspaceProject,
-  WorkspaceSchema
-} from '@schematics/angular/utility/workspace-models';
-import { getWorkspacePath } from '@nrwl/workspace';
-import { parse } from 'jsonc-parser';
-
-const enum availableTargetNames {
-  targets = 'targets',
-  architect ='architect'
-}
+import { WorkspaceProject, WorkspaceSchema } from '@schematics/angular/utility/workspace-models';
+import { JsonArray, JsonObject, workspaces } from '@angular-devkit/core';
+
 
-export function getProjectTargetOptions(project: WorkspaceProject, buildTarget: string): BrowserBuilderOptions | TestBuilderOptions{
+export function getProjectTargetOptions(project: workspaces.ProjectDefinition, buildTarget: string):  Record<string, string | number | boolean | JsonArray | JsonObject> {
   if (project?.targets?.get(buildTarget)?.options) {
     return project.targets.get(buildTarget).options;
   }
-
-  if (project?.architect?.[buildTarget]?.options) {
-    return project.architect[buildTarget].options;
-  }
-
   throw new Error(`Cannot determine project target configuration for: ${buildTarget}.`);
 }
 
-export function getProjectTargetName(project: WorkspaceProject): string {
-  if (project?.targets) {
-    return availableTargetNames.targets;
-  }
-
-  if(project?.architect) {
-    return availableTargetNames.architect;
-  }
-  throw new Error(`Cannot determine target name`);
-}
-
 function sortObjectByKeys(obj: { [key: string]: string }) {
   return Object
     .keys(obj)
@@ -103,7 +77,7 @@ export function removePackageJsonDependency(tree: Tree, dependencyName: string)
   tree.overwrite('/package.json', JSON.stringify(packageContent, null, 2));
 }
 
-export function addModuleImportToRootModule(host: Tree, moduleName: string, src: string, project: WorkspaceProject) {
+export function addModuleImportToRootModule(host: Tree, moduleName: string, src: string, project: workspaces.ProjectDefinition) {
   const modulePath = getAppModulePath(host, getProjectMainFile(project));
   const moduleSource = getSourceFile(host, modulePath);
   if (!moduleSource) {
@@ -146,14 +120,3 @@ export function getProjectFromWorkSpace(workspace: WorkspaceSchema, projectName?
   return project;
 }
 
-export function getWorkspace (host: Tree) {
-  const path = getWorkspacePath(host);
-  const configBuffer = host.read(path);
-  if (configBuffer === null) {
-    throw new SchematicsException(`Could not find (${path})`);
-  }
-
-  const content = configBuffer.toString();
-  return parse(content);
-}
-

src/schematics/src/utils/project-main-file.ts

@@ -8,15 +8,15 @@
 
 import { SchematicsException } from '@angular-devkit/schematics';
 import { getProjectTargetOptions } from './project-targets';
-import { WorkspaceProject } from '@schematics/angular/utility/workspace-models';
+import { workspaces } from '@angular-devkit/core';
 
 /** Looks for the main TypeScript file in the given project and returns its path. */
-export function getProjectMainFile(project: WorkspaceProject): string {
+export function getProjectMainFile(project: workspaces.ProjectDefinition): string {
   const buildOptions = getProjectTargetOptions(project, 'build');
   if (!buildOptions.main) {
     throw new SchematicsException(`Could not find the project main file inside of the ` +
       `workspace config (${project.sourceRoot})`);
   }
 
-  return buildOptions.main;
+  return buildOptions.main.toString();
 }

src/schematics/src/utils/project-targets.ts

@@ -6,12 +6,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import { WorkspaceProject } from '@schematics/angular/utility/workspace-models';
+import { workspaces } from '@angular-devkit/core';
 
 /** Resolves the architect options for the build target of the given project. */
-export function getProjectTargetOptions(project: WorkspaceProject, buildTarget: string) {
-  if (!project?.architect?.[buildTarget]?.options?.main) {
-    throw new Error(`Cannot determine project target configuration for: ${buildTarget}.`);
+export function getProjectTargetOptions(project: workspaces.ProjectDefinition, buildTarget: string) {
+  if (project?.targets?.get(buildTarget)?.options) {
+    return project.targets.get(buildTarget).options;
   }
-  return project.architect[buildTarget].options;
+
+  throw new Error(`Cannot determine project target configuration for: ${buildTarget}.`);
 }