fix(angular): ng-add schematic (#20281)

* fix(angular): update ng-add schematic to use the project name

* fix(angular): use relative schematics collection.json path.

angular/README.md

@@ -23,7 +23,7 @@ Ionic Angular specific building blocks on top of [@ionic/core](https://www.npmjs
 
 1. Pull the latest from master
 2. Build ionic/angular: `npm run build`
-3. Run `npm link` from ionic/angular directory
+3. Run `npm link` from `ionic/angular/dist` directory
 4. Create a blank angular project
 
 ```

angular/package.json

@@ -74,7 +74,7 @@
     "typescript": "3.4.5",
     "zone.js": "^0.8.28"
   },
-  "schematics": "schematics/collection.json",
+  "schematics": "./schematics/collection.json",
   "ngPackage": {
     "lib": {
       "entryFile": "src/index.ts"

angular/src/schematics/add/index.ts

@@ -1,9 +1,8 @@
 import { join, Path } from '@angular-devkit/core';
 import { apply, chain, mergeWith, move, Rule, SchematicContext, SchematicsException, template, Tree, url } from '@angular-devkit/schematics';
 import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';
-import { WorkspaceProject } from '@angular-devkit/core/src/experimental/workspace';
 import { addModuleImportToRootModule } from './../utils/ast';
-import { addArchitectBuilder, addStyle, getWorkspace, addAsset } from './../utils/config';
+import { addArchitectBuilder, addStyle, getWorkspace, addAsset, WorkspaceProject, WorkspaceSchema } from './../utils/config';
 import { addPackageToPackageJson } from './../utils/package';
 import { Schema as IonAddOptions } from './schema';
 
@@ -70,29 +69,29 @@ function addIonicons(): Rule {
   };
 }
 
-function addIonicBuilder(project: WorkspaceProject): Rule {
+function addIonicBuilder(projectName: string): Rule {
   return (host: Tree) => {
     addArchitectBuilder(host, 'ionic-cordova-serve', {
       builder: '@ionic/angular-toolkit:cordova-serve',
       options: {
-        cordovaBuildTarget: `${project}:ionic-cordova-build`,
+        cordovaBuildTarget: `${projectName}:ionic-cordova-build`,
-        devServerTarget: `${project}:serve`
+        devServerTarget: `${projectName}:serve`
       },
       configurations: {
         production: {
-          cordovaBuildTarget: `${project}:ionic-cordova-build:production`,
+          cordovaBuildTarget: `${projectName}:ionic-cordova-build:production`,
-          devServerTarget: `${project}:serve:production`
+          devServerTarget: `${projectName}:serve:production`
         }
       }
     });
     addArchitectBuilder(host, 'ionic-cordova-build', {
       builder: '@ionic/angular-toolkit:cordova-build',
       options: {
-        browserTarget: `${project}:build`
+        browserTarget: `${projectName}:build`
       },
       configurations: {
         production: {
-          browserTarget: `${project}:build:production`
+          browserTarget: `${projectName}:build:production`
         }
       }
     });
@@ -108,17 +107,17 @@ function installNodeDeps() {
 
 export default function ngAdd(options: IonAddOptions): Rule {
   return (host: Tree) => {
-    const workspace = getWorkspace(host);
+    const workspace: WorkspaceSchema = getWorkspace(host);
     if (!options.project) {
       options.project = Object.keys(workspace.projects)[0];
     }
-    const project = workspace.projects[options.project];
+    const project: WorkspaceProject = workspace.projects[options.project];
     if (project.projectType !== 'application') {
       throw new SchematicsException(
         `Ionic Add requires a project type of "application".`
       );
     }
-    const sourcePath = join(project.root as Path, project.sourceRoot as Path);
+    const sourcePath: Path = join(project.root as Path, project.sourceRoot as Path);
     const rootTemplateSource = apply(url('./files/root'), [
       template({ ...options }),
       move(sourcePath)
@@ -128,7 +127,7 @@ export default function ngAdd(options: IonAddOptions): Rule {
       addIonicAngularToPackageJson(),
       addIonicAngularToolkitToPackageJson(),
       addIonicAngularModuleToAppModule(sourcePath),
-      addIonicBuilder(project),
+      addIonicBuilder(options.project),
       addIonicStyles(sourcePath),
       addIonicons(),
       mergeWith(rootTemplateSource),

angular/src/schematics/utils/config.ts

@@ -89,6 +89,7 @@ export function addArchitectBuilder(host: Tree, builderName: string, builderOpts
 }
 
 export type WorkspaceSchema = experimental.workspace.WorkspaceSchema;
+export type WorkspaceProject = experimental.workspace.WorkspaceProject;
 
 export function getWorkspacePath(host: Tree): string {
   const possibleFiles = ['/angular.json', '/.angular.json'];