refactor(angular): move to packages directory (#27719)

Issue number: N/A

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

The `angular` directory sits at the root of the project instead of in
`packages` with all the other JS Framework integrations. This does not
cause any functional issues with Ionic, but it is confusing since
integrations are not in a consistent place.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Moves the `angular` directory to `packages/angular`

Note: Most files should remain unchanged. The only files I changed are
the files that had direct paths to the old `angular` directory:

1. Removes the `angular` path in `lerna.json`. This is now covered by
`packages/*`
2. Updated the angular file path in `.gitignore`
3. Updates the path to the angular package in `stencil.config.ts` for
the Angular Output Targets
4. Updates some of Angular's sync scripts to correctly get the core
stylesheets as well as the core package.
5. Updates the test app sync script to correctly sync core and
angular-server

~I'm not entirely sure why GitHub thinks
https://github.com/ionic-team/ionic-framework/pull/27719/files#diff-f5bba7e7c7c75426e2b9c89868310cb03890493b4efe0252adf8d12cc8398962
is a new file since it exists in `main` here:
1f06be4a31/angular/test/base/scripts/build-ionic.sh~
Fixed in
6e7fc49827

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build: `7.1.2-dev.11688052109.13454f5c`

packages/angular/src/schematics/add/files/root/theme/variables.css

@@ -0,0 +1,6 @@
+/* Ionic Variables and Theming. */
+/* This is just a placeholder file For more info, please see: */
+/* https://ionicframework.com/docs/theming/basics */
+
+/* To quickly generate your own theme, check out the color generator */
+/* https://ionicframework.com/docs/theming/color-generator */

packages/angular/src/schematics/add/index.ts

@@ -0,0 +1,141 @@
+import { Path, join } from '@angular-devkit/core';
+import {
+  Rule,
+  SchematicContext,
+  Tree,
+  apply,
+  chain,
+  mergeWith,
+  move,
+  SchematicsException,
+  template,
+  url,
+} from '@angular-devkit/schematics';
+import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';
+import { getWorkspace } from '@schematics/angular/utility/workspace';
+
+import { addModuleImportToRootModule } from './../utils/ast';
+import { addArchitectBuilder, addAsset, addStyle, getDefaultAngularAppName } from './../utils/config';
+import { addPackageToPackageJson } from './../utils/package';
+import { Schema as IonAddOptions } from './schema';
+
+function addIonicAngularToPackageJson(): Rule {
+  return (host: Tree) => {
+    addPackageToPackageJson(host, 'dependencies', '@ionic/angular', 'latest');
+    return host;
+  };
+}
+
+function addIonicAngularToolkitToPackageJson(): Rule {
+  return (host: Tree) => {
+    addPackageToPackageJson(host, 'devDependencies', '@ionic/angular-toolkit', 'latest');
+    return host;
+  };
+}
+
+function addIonicAngularModuleToAppModule(projectSourceRoot: Path): Rule {
+  return (host: Tree) => {
+    addModuleImportToRootModule(host, projectSourceRoot, 'IonicModule.forRoot()', '@ionic/angular');
+    return host;
+  };
+}
+
+function addIonicStyles(projectName: string, projectSourceRoot: Path): Rule {
+  return (host: Tree) => {
+    const ionicStyles = [
+      'node_modules/@ionic/angular/css/core.css',
+      'node_modules/@ionic/angular/css/normalize.css',
+      'node_modules/@ionic/angular/css/structure.css',
+      'node_modules/@ionic/angular/css/typography.css',
+      'node_modules/@ionic/angular/css/display.css',
+      'node_modules/@ionic/angular/css/padding.css',
+      'node_modules/@ionic/angular/css/float-elements.css',
+      'node_modules/@ionic/angular/css/text-alignment.css',
+      'node_modules/@ionic/angular/css/text-transformation.css',
+      'node_modules/@ionic/angular/css/flex-utils.css',
+      `${projectSourceRoot}/theme/variables.css`,
+    ];
+
+    ionicStyles.forEach((entry) => {
+      addStyle(host, projectName, entry);
+    });
+    return host;
+  };
+}
+
+function addIonicons(projectName: string): Rule {
+  return (host: Tree) => {
+    const ioniconsGlob = {
+      glob: '**/*.svg',
+      input: 'node_modules/ionicons/dist/ionicons/svg',
+      output: './svg',
+    };
+    addAsset(host, projectName, 'build', ioniconsGlob);
+    addAsset(host, projectName, 'test', ioniconsGlob);
+    return host;
+  };
+}
+
+function addIonicBuilder(projectName: string): Rule {
+  return (host: Tree) => {
+    addArchitectBuilder(host, projectName, 'ionic-cordova-serve', {
+      builder: '@ionic/angular-toolkit:cordova-serve',
+      options: {
+        cordovaBuildTarget: `${projectName}:ionic-cordova-build`,
+        devServerTarget: `${projectName}:serve`,
+      },
+      configurations: {
+        production: {
+          cordovaBuildTarget: `${projectName}:ionic-cordova-build:production`,
+          devServerTarget: `${projectName}:serve:production`,
+        },
+      },
+    });
+    addArchitectBuilder(host, projectName, 'ionic-cordova-build', {
+      builder: '@ionic/angular-toolkit:cordova-build',
+      options: {
+        browserTarget: `${projectName}:build`,
+      },
+      configurations: {
+        production: {
+          browserTarget: `${projectName}:build:production`,
+        },
+      },
+    });
+    return host;
+  };
+}
+
+function installNodeDeps() {
+  return (_host: Tree, context: SchematicContext) => {
+    context.addTask(new NodePackageInstallTask());
+  };
+}
+
+export default function ngAdd(options: IonAddOptions): Rule {
+  return async (host: Tree) => {
+    const workspace = await getWorkspace(host);
+    if (!options.project) {
+      options.project = getDefaultAngularAppName(workspace);
+    }
+    const project = workspace.projects.get(options.project);
+
+    if (!project || project.extensions.projectType !== 'application') {
+      throw new SchematicsException(`Ionic Add requires a project type of "application".`);
+    }
+    const sourcePath: Path = join(project.sourceRoot as Path);
+    const rootTemplateSource = apply(url('./files/root'), [template({ ...options }), move(sourcePath)]);
+    return chain([
+      // @ionic/angular
+      addIonicAngularToPackageJson(),
+      addIonicAngularToolkitToPackageJson(),
+      addIonicAngularModuleToAppModule(sourcePath),
+      addIonicBuilder(options.project),
+      addIonicStyles(options.project, sourcePath),
+      addIonicons(options.project),
+      mergeWith(rootTemplateSource),
+      // install freshly added dependencies
+      installNodeDeps(),
+    ]);
+  };
+}

packages/angular/src/schematics/add/schema.d.ts

@@ -0,0 +1,3 @@
+export interface Schema {
+  project?: string;
+}

packages/angular/src/schematics/add/schema.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "ionicNgAdd",
+  "title": "Ionic Add options",
+  "type": "object",
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "The name of the project.",
+      "$default": {
+        "$source": "projectName"
+      }
+    }
+  },
+  "required": []
+}