fix(schematics): Missing deps, fixed ng add bug (#2952)

package.json

@@ -43,7 +43,7 @@
   },
   "homepage": "https://github.com/angular/angularfire#readme",
   "dependencies": {
-    "@angular-devkit/architect": "^0.1200.0",
+    "@angular-devkit/architect": "> 0.1200.0 < 0.1300.0",
     "@angular-devkit/core": "^12.0.0",
     "@angular-devkit/schematics": "^12.0.0",
     "@angular/common": "^12.0.0",

src/package.json

@@ -27,6 +27,9 @@
     "@angular/core": "^12.0.0",
     "@angular/platform-browser": "^12.0.0",
     "@angular/platform-browser-dynamic": "^12.0.0",
+    "@angular-devkit/schematics": "^12.0.0",
+    "@angular-devkit/architect": "> 0.1200.0 < 0.1300.0",
+    "@schematics/angular": "^12.0.0",
     "firebase": "^9.0.0",
     "rxfire": "^6.0.0",
     "rxjs": "~6.6.0"
@@ -39,7 +42,11 @@
     "jsonc-parser": "^3.0.0",
     "ora": "^5.3.0",
     "winston": "^3.0.0",
-    "triple-beam": "^1.3.0"
+    "triple-beam": "^1.3.0",
+    "node-fetch": "^2.6.1",
+    "semver": "^7.1.3",
+    "inquirer": "^8.1.1",
+    "fs-extra": "^8.0.1"
   },
   "ngPackage": {
     "lib": {
@@ -56,7 +63,8 @@
     "allowedNonPeerDependencies": [
       "fuzzy", "inquirer-autocomplete-prompt",
       "open", "jsonc-parser", "ora", "winston",
-      "triple-beam"
+      "triple-beam", "@schematics/angular", "node-fetch",
+      "semver", "inquirer", "fs-extra"
     ]
   },
   "ng-update": {

src/schematics/add/index.ts

@@ -1,34 +1,16 @@
-import { chain, Rule, SchematicContext, TaskId, Tree } from '@angular-devkit/schematics';
+import { SchematicContext, Tree } from '@angular-devkit/schematics';
 import { DeployOptions } from '../interfaces';
 import { addDependencies } from '../common';
 import { peerDependencies } from '../versions.json';
 import { NodePackageInstallTask, RunSchematicTask } from '@angular-devkit/schematics/tasks';
 
-const addFirebaseHostingDependencies = () => (tree: Tree, context: SchematicContext) => {
+export const ngAdd = (options: DeployOptions) => (tree: Tree, context: SchematicContext) => {
   addDependencies(
     tree,
     peerDependencies,
     context
   );
-  return tree;
-};
-
-let npmInstallTaskId: TaskId;
-
-const npmInstall = () => (tree: Tree, context: SchematicContext) => {
-  npmInstallTaskId = context.addTask(new NodePackageInstallTask());
-  return tree;
-};
-
-const runSetup = (options: DeployOptions) => (tree: Tree, context: SchematicContext) => {
+  const npmInstallTaskId = context.addTask(new NodePackageInstallTask());
   context.addTask(new RunSchematicTask('ng-add-setup-project', options), [npmInstallTaskId]);
   return tree;
 };
-
-export const ngAdd = (options: DeployOptions): Rule => {
-  return chain([
-    addFirebaseHostingDependencies(),
-    npmInstall(),
-    runSetup(options),
-  ]);
-};

src/schematics/common.ts

@@ -1,7 +1,8 @@
 import { SchematicsException, Tree, SchematicContext } from '@angular-devkit/schematics';
 import { FirebaseHostingSite, FirebaseRc } from './interfaces';
 import * as semver from 'semver';
-import { shortSiteName } from './utils';
+
+export const shortSiteName = (site?: FirebaseHostingSite) => site?.name && site.name.split('/').pop();
 
 export const stringifyFormatted = (obj: any) => JSON.stringify(obj, null, 2);
 

src/schematics/setup/prompts.ts

@@ -1,8 +1,9 @@
 import * as fuzzy from 'fuzzy';
 import * as inquirer from 'inquirer';
 import { featureOptions, FEATURES, FirebaseApp, FirebaseHostingSite, FirebaseProject, PROJECT_TYPE, WorkspaceProject } from '../interfaces';
-import { hasPrerenderOption, isUniversalApp, shortAppId, shortSiteName } from '../utils';
+import { hasPrerenderOption, isUniversalApp, shortAppId } from '../utils';
 import { getFirebaseTools } from '../firebaseTools';
+import { shortSiteName } from '../common';
 
 inquirer.registerPrompt('autocomplete', require('inquirer-autocomplete-prompt'));
 

src/schematics/setup/ssr.ts

@@ -9,7 +9,7 @@ import {
 import { FirebaseJSON, Workspace, WorkspaceProject, NgAddNormalizedOptions, PROJECT_TYPE } from '../interfaces';
 import { firebaseFunctionsDependencies } from '../versions.json';
 import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';
-import { shortSiteName } from '../utils';
+import { shortSiteName } from '../common';
 
 function generateHostingConfig(project: string, dist: string, functionName: string, projectType: PROJECT_TYPE) {
   return {

src/schematics/setup/static.ts

@@ -6,8 +6,7 @@ import {
   stringifyFormatted
 } from '../common';
 import { NgAddNormalizedOptions, FirebaseJSON, Workspace, WorkspaceProject } from '../interfaces';
-
-import { shortSiteName } from '../utils';
+import { shortSiteName } from '../common';
 
 function emptyFirebaseJson() {
   return {

src/schematics/utils.ts

@@ -1,5 +1,5 @@
 import { readFileSync } from 'fs';
-import { FirebaseRc, Workspace, WorkspaceProject, FirebaseApp, FirebaseHostingSite, DeployOptions, FEATURES } from './interfaces';
+import { FirebaseRc, Workspace, WorkspaceProject, FirebaseApp, DeployOptions, FEATURES } from './interfaces';
 import { join } from 'path';
 import { SchematicsException, Tree } from '@angular-devkit/schematics';
 import ts from '@schematics/angular/third_party/github.com/Microsoft/TypeScript/lib/typescript';
@@ -20,8 +20,6 @@ export const hasPrerenderOption = (
 
 export const shortAppId = (app?: FirebaseApp) => app?.appId && app.appId.split('/').pop();
 
-export const shortSiteName = (site?: FirebaseHostingSite) => site?.name && site.name.split('/').pop();
-
 export function getWorkspace(
   host: Tree
 ): { path: string; workspace: Workspace } {