Resolve problems with ng add schematics and add ng update schematics

Author: idzark

projects/angular-bootstrap-md/schematics/collection.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "./node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "ng-add": {
+      "description": "Add MDB Angular Free to the application.",
+      "factory": "./ng-add/index#ngAdd",
+      "schema": "./ng-add/schema.json"
+    },
+    "ng-add-mdb-setup": {
+      "description": "Setup MDB Angular Free.",
+      "factory": "./ng-add/mdb-setup",
+      "schema": "./ng-add/schema.json"
+    }
+  }
+}

projects/angular-bootstrap-md/schematics/migration.json

@@ -0,0 +1,13 @@
+{
+    "$schema": "./node_modules/@angular-devkit/schematics/collection-schema.json",
+    "schematics": {
+      "migration-v9": {
+        "version": "9.0.0-0",
+        "description": "Updates MDB Angular Pro to version 9",
+        "factory": "./ng-update/index#updateToV9"
+      }
+    },
+    "ng-update": {
+      "migrations": "./schematics/migration.json"
+    }
+  }

projects/angular-bootstrap-md/schematics/ng-add/index.ts

@@ -0,0 +1,27 @@
+import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
+import { RunSchematicTask, NodePackageInstallTask } from '@angular-devkit/schematics/tasks';
+import { Schema } from './schema';
+import { addPackageToPackageJson } from './package';
+
+// Just return the tree
+export function ngAdd(options: Schema): Rule {
+  return (tree: Tree, context: SchematicContext) => {
+    const angularDependencyVersion = '^9.0.0';
+
+    addPackageToPackageJson(tree, '@angular/cdk', angularDependencyVersion);
+    addPackageToPackageJson(tree, '@angular/forms', angularDependencyVersion);
+    addPackageToPackageJson(tree, '@angular/animations', angularDependencyVersion);
+
+    if (options.externalDependencies) {
+      addPackageToPackageJson(tree, 'chart.js', '^2.7.2');
+      addPackageToPackageJson(tree, '@types/chart.js', '^2.7.40');
+      addPackageToPackageJson(tree, '@fortawesome/fontawesome-free', '~5.6.3');
+      addPackageToPackageJson(tree, 'hammerjs', '~2.0.8');
+      addPackageToPackageJson(tree, 'animate.css', '~3.7.2');
+    }
+
+    const installMainDependenciesTask = context.addTask(new NodePackageInstallTask());
+
+    context.addTask(new RunSchematicTask('ng-add-mdb-setup', options), [installMainDependenciesTask]);
+  };
+}

projects/angular-bootstrap-md/schematics/ng-add/mdb-setup.ts

@@ -0,0 +1,152 @@
+import {
+  Rule,
+  SchematicContext,
+  Tree,
+  chain,
+} from '@angular-devkit/schematics';
+import { getWorkspace } from '@schematics/angular/utility/config';
+import {
+  getAppModulePath,
+  getProjectMainFile,
+  hasNgModuleImport,
+  addModuleImportToRootModule,
+  getProjectFromWorkspace,
+  getProjectIndexFiles,
+  appendHtmlElementToHead,
+} from '@angular/cdk/schematics';
+import { Schema } from './schema';
+
+export default function(options: Schema): Rule {
+  return chain([
+    addMdbFreeModuleImport(options),
+    addAngularAnimationsModule(options),
+    addStylesAndScriptsToAngularJson(options),
+    addRobotoFontToIndexHtml(),
+  ]);
+}
+
+function addMdbFreeModuleImport(options: Schema) {
+  return (tree: Tree) => {
+    const workspace = getWorkspace(tree);
+    const project = getProjectFromWorkspace(workspace, options.project);
+    const mdbFreeModuleName = 'MDBBootstrapModule.forRoot()';
+    const mdbFreeModulePath = 'angular-bootstrap-md';
+
+    addModuleImportToRootModule(tree, mdbFreeModuleName, mdbFreeModulePath, project);
+
+    return tree;
+  };
+}
+
+
+function addAngularAnimationsModule(options: Schema) {
+  return (tree: Tree, context: SchematicContext) => {
+    const workspace = getWorkspace(tree);
+    const project = getProjectFromWorkspace(workspace, options.project);
+    const appModulePath = getAppModulePath(tree, getProjectMainFile(project));
+    const browserAnimationModule = 'BrowserAnimationsModule';
+    const animationsModulePath = '@angular/platform-browser/animations';
+    const noopAnimationModule = 'NoopAnimationsModule';
+
+    if (options.animations) {
+      if (hasNgModuleImport(tree, appModulePath, noopAnimationModule)) {
+        context.logger.error(
+          `Could not add ${browserAnimationModule} because ${noopAnimationModule} is already added`
+        );
+        return;
+      }
+
+      addModuleImportToRootModule(tree, browserAnimationModule, animationsModulePath, project);
+    } else if (!hasNgModuleImport(tree, appModulePath, noopAnimationModule)) {
+      addModuleImportToRootModule(tree, noopAnimationModule, animationsModulePath, project);
+    }
+
+    return tree;
+  };
+}
+
+function addRobotoFontToIndexHtml() {
+  return (tree: Tree, context: SchematicContext) => {
+    const fontUrl = 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,600&display=swap';
+    const workspace = getWorkspace(tree);
+    const project = getProjectFromWorkspace(workspace);
+    const projectIndexFiles = getProjectIndexFiles(project);
+    const logger = context.logger;
+
+    if (!projectIndexFiles.length) {
+      logger.error('Index HTML not found');
+      logger.info('Add roboto font manually');
+      return;
+    }
+
+    projectIndexFiles.forEach((indexFile: any) => {
+      appendHtmlElementToHead(tree, indexFile, `<link href="${fontUrl}" rel="stylesheet">`);
+    });
+
+    return tree;
+  };
+}
+
+function addStylesAndScriptsToAngularJson(options: Schema) {
+  return (tree: Tree, context: SchematicContext) => {
+    const logger = context.logger;
+    const mainStyles = [
+      {
+        name: 'bootstrap',
+        path: './node_modules/angular-bootstrap-md/assets/scss/bootstrap/bootstrap.scss',
+      },
+      { name: 'mdb', path: './node_modules/angular-bootstrap-md/assets/scss/mdb.scss' },
+    ];
+
+    const additionalStyles = [
+      {
+        name: 'fontawesome',
+        path: './node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss',
+      },
+      {
+        name: 'fontawesome-solid',
+        path: './node_modules/@fortawesome/fontawesome-free/scss/solid.scss',
+      },
+      {
+        name: 'fontawesome-regular',
+        path: './node_modules/@fortawesome/fontawesome-free/scss/regular.scss',
+      },
+      {
+        name: 'fontawesome-brand',
+        path: './node_modules/@fortawesome/fontawesome-free/scss/brands.scss',
+      },
+      { name: 'animate.css', path: './node_modules/animate.css/animate.css' },
+    ];
+
+    const allStyles = options.externalDependencies ? [...mainStyles, ...additionalStyles] : mainStyles;
+    const additionalScripts = [
+      { name: 'chart.js', path: './node_modules/chart.js/dist/Chart.js' },
+      { name: 'hammerjs', path: './node_modules/hammerjs/hammer.min.js' },
+    ];
+
+    const angularJsonFile = tree.read('angular.json');
+
+    if (angularJsonFile) {
+      const angularJsonFileObject = JSON.parse(angularJsonFile.toString('utf-8'));
+      const project = options.project
+        ? options.project
+        : Object.keys(angularJsonFileObject['projects'])[0];
+      const projectObject = angularJsonFileObject.projects[project];
+      const styles = projectObject.architect.build.options.styles;
+      const scripts = projectObject.architect.build.options.scripts;
+
+      allStyles.forEach(style => {
+        styles.unshift(style.path);
+      });
+
+      additionalScripts.forEach(script => {
+        scripts.push(script.path);
+      });
+      tree.overwrite('angular.json', JSON.stringify(angularJsonFileObject, null, 2));
+    } else {
+      logger.error('Failed to add scripts or styles to angular.json');
+    }
+
+    return tree;
+  };
+}

projects/angular-bootstrap-md/schematics/ng-add/package.ts

@@ -0,0 +1,28 @@
+import { Tree } from '@angular-devkit/schematics';
+
+function sortObjectByKeys(obj: any) {
+  return Object.keys(obj)
+    .sort()
+    .reduce((result: any, key) => (result[key] = obj[key]) && result, {});
+}
+
+export function addPackageToPackageJson(tree: Tree, pkg: string, version: string): Tree {
+  if (tree.exists('package.json')) {
+    const packageJsonFile = tree.read('package.json');
+    const sourceText = packageJsonFile && packageJsonFile.toString('utf-8');
+    const json = sourceText && JSON.parse(sourceText);
+
+    if (!json.dependencies) {
+      json.dependencies = {};
+    }
+
+    if (!json.dependencies[pkg]) {
+      json.dependencies[pkg] = version;
+      json.dependencies = sortObjectByKeys(json.dependencies);
+    }
+
+    tree.overwrite('package.json', JSON.stringify(json, null, 2));
+  }
+
+  return tree;
+}

projects/angular-bootstrap-md/schematics/ng-add/schema.json

@@ -0,0 +1,28 @@
+{
+    "$schema": "http://json-schema.org/schema",
+    "id": "mdb-angular-ng-add",
+    "title": "MDB Angular ng-add schematic",
+    "type": "object",
+    "properties": {
+      "project": {
+        "type": "string",
+        "description": "Name of the project.",
+        "$default": {
+          "$source": "projectName"
+        }
+      },
+      "animations": {
+        "type": "boolean",
+        "default": true,
+        "description": "Whether to set up Angular animations.",
+        "x-prompt": "Set up Angular animations?"
+      },
+      "externalDependencies": {
+        "type": "boolean",
+        "default": false,
+        "description": "Whether to set up external dependencies.",
+        "x-prompt": "Set up external dependencies (chart.js, hammerjs, animate, font awesome)?"
+      }
+    },
+    "required": []
+  }

projects/angular-bootstrap-md/schematics/ng-add/schema.ts

@@ -0,0 +1,5 @@
+export interface Schema {
+    project: string;
+    animations: boolean;
+    externalDependencies: boolean;
+}

projects/angular-bootstrap-md/schematics/ng-update/index.ts

@@ -0,0 +1,30 @@
+import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
+import { getWorkspace } from '@schematics/angular/utility/config';
+import {
+    getProjectFromWorkspace,
+    getProjectIndexFiles,
+    appendHtmlElementToHead,
+  } from '@angular/cdk/schematics';
+
+export function updateToV9(): Rule {
+  return (tree: Tree, context: SchematicContext) => {
+
+    const fontUrl = 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,600&display=swap';
+    const workspace = getWorkspace(tree);
+    const project = getProjectFromWorkspace(workspace);
+    const projectIndexFiles = getProjectIndexFiles(project);
+    const logger = context.logger;
+
+    if (!projectIndexFiles.length) {
+      logger.error('Index HTML not found');
+      logger.info('Add roboto font manually');
+      return;
+    }
+
+    projectIndexFiles.forEach((indexFile: any) => {
+      appendHtmlElementToHead(tree, indexFile, `<link href="${fontUrl}" rel="stylesheet">`);
+    });
+
+    return tree;
+  };
+}

projects/angular-bootstrap-md/tsconfig.schematics.json

@@ -0,0 +1,34 @@
+{
+    "compilerOptions": {
+      "baseUrl": ".",
+      "lib": [
+        "es2018",
+        "dom"
+      ],
+      "declaration": true,
+      "module": "commonjs",
+      "moduleResolution": "node",
+      "noEmitOnError": true,
+      "noFallthroughCasesInSwitch": true,
+      "noImplicitAny": true,
+      "noImplicitThis": true,
+      "noUnusedParameters": true,
+      "noUnusedLocals": true,
+      "rootDir": "schematics",
+      "outDir": "../../dist/angular-bootstrap-md/schematics",
+      "skipDefaultLibCheck": true,
+      "skipLibCheck": true,
+      "sourceMap": true,
+      "strictNullChecks": true,
+      "target": "es6",
+      "types": [
+        "jasmine",
+        "node"
+      ]
+    },
+    "include": [
+      "schematics/"
+    ],
+    "exclude": [
+    ]
+  }