Angular create tauri app [#1934] (#2203)

Author: Epsilon02

.changes/cta-added-angular-cli.md

@@ -0,0 +1,5 @@
+---
+"create-tauri-app": patch
+---
+
+Added Angular CLI recipe.

.github/workflows/test-cta.yml

@@ -26,7 +26,7 @@ jobs:
       matrix:
         node: ["14", "16"]
         manager: ["6", "7"]
-        recipe: ["vanillajs", "cra", "vite"]
+        recipe: ["vanillajs", "cra", "vite", "ngcli"]
         exclude:
           - node: "16"
             manager: "6"
@@ -73,7 +73,7 @@ jobs:
       fail-fast: false
       matrix:
         node: ["14", "16"]
-        recipe: ["vanillajs", "cra", "vite"]
+        recipe: ["vanillajs", "cra", "vite", "ngcli"]
 
     steps:
       - uses: actions/checkout@v2

tooling/create-tauri-app/src/index.ts

@@ -11,6 +11,7 @@ import { cra } from './recipes/react'
 import { vuecli } from './recipes/vue-cli'
 import { vanillajs } from './recipes/vanilla'
 import { vite } from './recipes/vite'
+import { ngcli } from './recipes/ng-cli'
 import { install, checkPackageManager } from './dependency-manager'
 import { shell } from './shell'
 import { addTauriScript } from './helpers/add-tauri-script'
@@ -113,7 +114,7 @@ interface Responses {
   recipeName: string
 }
 
-const allRecipes: Recipe[] = [vanillajs, cra, vite, vuecli]
+const allRecipes: Recipe[] = [vanillajs, cra, vite, vuecli, ngcli]
 
 const recipeByShortName = (name: string): Recipe | undefined =>
   allRecipes.find((r) => r.shortName === name)

tooling/create-tauri-app/src/recipes/ng-cli.ts

@@ -0,0 +1,108 @@
+import { PackageManager } from '../dependency-manager'
+import { shell } from '../shell'
+import { Recipe } from '../types/recipe'
+
+const addAdditionalPackage = async (
+  packageManager: PackageManager,
+  cwd: string,
+  appName: string,
+  packageName: string
+): Promise<void> => {
+  const ngCommand = ['ng', 'add', packageName, '--skip-confirmation']
+
+  if (packageManager === 'yarn') {
+    await shell('yarn', ngCommand, {
+      cwd: `${cwd}/${appName}`
+    })
+  } else {
+    await shell('npm', ['run', ...ngCommand], {
+      cwd: `${cwd}/${appName}`
+    })
+  }
+}
+
+const ngcli: Recipe = {
+  descriptiveName: {
+    name: 'Angular CLI (https://angular.io/cli)',
+    value: 'ng-cli'
+  },
+  shortName: 'ngcli',
+  extraNpmDependencies: [],
+  extraNpmDevDependencies: [],
+  configUpdate: ({ cfg }) => ({
+    ...cfg,
+    distDir: `../dist/${cfg.appName}`,
+    devPath: 'http://localhost:4200'
+  }),
+  extraQuestions: ({ ci }) => {
+    return [
+      {
+        type: 'confirm',
+        name: 'material',
+        message: 'Add Angular Material (https://material.angular.io/)?',
+        validate: (input: string) => {
+          return input.toLowerCase() === 'yes'
+        },
+        loop: false,
+        when: !ci
+      },
+      {
+        type: 'confirm',
+        name: 'eslint',
+        message:
+          'Add Angular ESLint (https://github.com/angular-eslint/angular-eslint)?',
+        validate: (input: string) => {
+          return input.toLowerCase() === 'yes'
+        },
+        loop: false,
+        when: !ci
+      }
+    ]
+  },
+  preInit: async ({ cwd, cfg, answers, packageManager }) => {
+    // Angular CLI creates the folder for you
+    await shell(
+      'npx',
+      [
+        '-p',
+        '@angular/cli',
+        'ng',
+        'new',
+        `${cfg.appName}`,
+        `--package-manager=${packageManager}`
+      ],
+      {
+        cwd
+      }
+    )
+
+    if (answers) {
+      if (answers.material) {
+        await addAdditionalPackage(
+          packageManager,
+          cwd,
+          cfg.appName,
+          '@angular/material'
+        )
+      }
+
+      if (answers.eslint) {
+        await addAdditionalPackage(
+          packageManager,
+          cwd,
+          cfg.appName,
+          '@angular-eslint/schematics'
+        )
+      }
+    }
+  },
+  postInit: async ({ cwd }) => {
+    console.log(`
+      Your installation completed. Change directory to \`${cwd}\` and happy coding.
+    `)
+
+    return await Promise.resolve()
+  }
+}
+
+export { ngcli }

tooling/create-tauri-app/test/index.spec.ts

@@ -134,6 +134,14 @@ describe('CTA', () => {
                   'tauri:serve': expect.anything()
                 })
               )
+            },
+            ngcli: () => {
+              expect(packageFileOutput['scripts']).toEqual(
+                expect.objectContaining({
+                  ng: 'ng',
+                  tauri: 'tauri'
+                })
+              )
             }
           }