Make it possible to pick v5 or v6 from the ng-add schematic

Fixes #346

Author: devoto13

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

@@ -2,11 +2,12 @@ import { Tree } from '@angular-devkit/schematics';
 import { SchematicTestRunner } from '@angular-devkit/schematics/testing';
 import * as path from 'path';
 import { Schema } from './schema';
+import { angularFontawesomeVersion, iconPackVersion, v5 } from './versions';
 
 const collectionPath = path.join(__dirname, '../collection.json');
 
 describe('ng-add', () => {
-  it('adds dependencies to package.json', async () => {
+  it('adds v6 dependencies to package.json', async () => {
     const { runner, appTree } = await setup();
 
     const tree = await runner.runSchematicAsync<Schema>('ng-add', {}, appTree).toPromise();
@@ -16,8 +17,24 @@ describe('ng-add', () => {
 
     const dependencies = packageJson.dependencies;
 
-    expect(dependencies['@fortawesome/fontawesome-svg-core']).toBeDefined();
-    expect(dependencies['@fortawesome/angular-fontawesome']).toBeDefined();
+    expect(dependencies['@fortawesome/fontawesome-svg-core']).toBe(iconPackVersion);
+    expect(dependencies['@fortawesome/free-solid-svg-icons']).toBe(iconPackVersion);
+    expect(dependencies['@fortawesome/angular-fontawesome']).toBe(angularFontawesomeVersion);
+  });
+
+  it('adds v5 dependencies to package.json', async () => {
+    const { runner, appTree } = await setup();
+
+    const tree = await runner.runSchematicAsync<Schema>('ng-add', { version: '5' }, appTree).toPromise();
+
+    const packageJson = JSON.parse(tree.readContent('package.json'));
+    expect(packageJson.dependencies).toBeDefined();
+
+    const dependencies = packageJson.dependencies;
+
+    expect(dependencies['@fortawesome/fontawesome-svg-core']).toBe(v5.svgCoreVersion);
+    expect(dependencies['@fortawesome/free-solid-svg-icons']).toBe(v5.iconPackVersion);
+    expect(dependencies['@fortawesome/angular-fontawesome']).toBe(angularFontawesomeVersion);
   });
 
   it('adds FontAwesomeModule import to the AppModule', async () => {

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

@@ -11,15 +11,15 @@ import { addPackageJsonDependency, NodeDependencyType } from '@schematics/angula
 import { getAppModulePath } from '@schematics/angular/utility/ng-ast-utils';
 import { getWorkspace } from '@schematics/angular/utility/workspace';
 import { Schema } from './schema';
-import { angularFontawesomeVersion, iconPackVersion, svgCoreVersion } from './versions';
+import { angularFontawesomeVersion, iconPackVersion, v5 } from './versions';
 
 export default function (options: Schema): Rule {
   return chain([
     (tree: Tree, context: SchematicContext) => {
       addPackageJsonDependency(tree, {
         type: NodeDependencyType.Default,
         name: '@fortawesome/fontawesome-svg-core',
-        version: svgCoreVersion,
+        version: options.version === '6' ? iconPackVersion : v5.svgCoreVersion,
       });
 
       addPackageJsonDependency(tree, {
@@ -33,7 +33,7 @@ export default function (options: Schema): Rule {
         addPackageJsonDependency(tree, {
           type: NodeDependencyType.Default,
           name: `@fortawesome/${pack}-svg-icons`,
-          version: iconPackVersion,
+          version: options.version === '6' ? iconPackVersion : v5.iconPackVersion,
         });
       }
 

projects/schematics/src/ng-add/schema.json

@@ -11,12 +11,40 @@
         "$source": "projectName"
       }
     },
+    "version": {
+      "description": "The FontAwesome version to install.",
+      "type": "string",
+      "default": "6",
+      "x-prompt": {
+        "message": "Choose Font Awesome version you would like to use:",
+        "type": "list",
+        "items": [
+          {
+            "value": "6",
+            "label": "Font Awesome 6"
+          },
+          {
+            "value": "5",
+            "label": "Font Awesome 5"
+          }
+        ]
+      }
+    },
     "iconPackages": {
       "description": "The icon packages to install.",
       "type": "array",
       "items": {
         "type": "string",
-        "enum": ["free-solid", "free-regular", "free-brands", "pro-solid", "pro-regular", "pro-light", "pro-duotone"]
+        "enum": [
+          "free-solid",
+          "free-regular",
+          "free-brands",
+          "pro-solid",
+          "pro-regular",
+          "pro-light",
+          "pro-duotone",
+          "pro-thin"
+        ]
       },
       "default": ["free-solid"],
       "x-prompt": {
@@ -38,19 +66,23 @@
           },
           {
             "value": "pro-solid",
-            "label": "Pro Solid Icons    [ Requires: https://fontawesome.com/pro ]"
+            "label": "Pro Solid Icons    [ Requires Pro plan: https://fontawesome.com/plans ]"
           },
           {
             "value": "pro-regular",
-            "label": "Pro Regular Icons  [ Requires: https://fontawesome.com/pro ]"
+            "label": "Pro Regular Icons  [ Requires Pro plan: https://fontawesome.com/plans ]"
           },
           {
             "value": "pro-light",
-            "label": "Pro Light Icons    [ Requires: https://fontawesome.com/pro ]"
+            "label": "Pro Light Icons    [ Requires Pro plan: https://fontawesome.com/plans ]"
           },
           {
             "value": "pro-duotone",
-            "label": "Pro Duotone Icons  [ Requires: https://fontawesome.com/pro ]"
+            "label": "Pro Duotone Icons  [ Requires Pro plan: https://fontawesome.com/plans ]"
+          },
+          {
+            "value": "pro-thin",
+            "label": "Pro Thin Icons     [ Requires Pro plan: https://fontawesome.com/plans ]"
           }
         ]
       }

projects/schematics/src/ng-add/schema.ts

@@ -2,6 +2,9 @@ export interface Schema {
   /** Name of the project. */
   project?: string;
 
+  /** The FontAwesome version to install. */
+  version?: '5' | '6';
+
   /** The icon packages to install */
   iconPackages?: (
     | 'free-solid'
@@ -11,5 +14,6 @@ export interface Schema {
     | 'pro-regular'
     | 'pro-light'
     | 'pro-duotone'
+    | 'pro-thin'
   )[];
 }

projects/schematics/src/ng-add/versions.ts

@@ -1,3 +1,7 @@
-export const svgCoreVersion = '~1.2.36';
 export const angularFontawesomeVersion = '~0.10.1';
-export const iconPackVersion = '^5.15.4';
+export const iconPackVersion = '^6.1.0';
+
+export const v5 = {
+  svgCoreVersion: '~1.2.36',
+  iconPackVersion: '^5.15.4',
+};