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/test/base/cypress/plugins/index.js

@@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

packages/angular/test/base/cypress/support/commands.js

@@ -0,0 +1,79 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+
+Cypress.Commands.add('ionSwipeToGoBack', (complete = false, selector = 'ion-router-outlet') => {
+  const increment = complete ? 60 : 25;
+  cy.get(selector)
+    .first()
+    .trigger('mousedown', 0, 275, { which: 1, force: true })
+    .trigger('mousemove', increment * 1, 275, { which: 1, force: true })
+    .wait(50)
+    .trigger('mousemove', increment * 2, 275, { which: 1, force: true })
+    .wait(50)
+    .trigger('mousemove', increment * 3, 275, { which: 1, force: true })
+    .wait(50)
+    .trigger('mousemove', increment * 4, 275, { which: 1, force: true })
+    .wait(50)
+    .trigger('mouseup', increment * 4, 275, { which: 1, force: true });
+  cy.wait(150);
+});
+
+Cypress.Commands.add('testStack', (selector, expected) => {
+  cy.document().then((doc) => {
+    const children = Array.from(doc.querySelector(selector).children).map((el) => el.tagName.toLowerCase());
+    expect(children).to.deep.equal(expected);
+  });
+});
+
+Cypress.Commands.add('testLifeCycle', (selector, expected) => {
+  cy.get(`${selector} #ngOnInit`).invoke('text').should('equal', '1');
+  cy.get(`${selector} #ionViewWillEnter`).invoke('text').should('equal', expected.ionViewWillEnter.toString());
+  cy.get(`${selector} #ionViewDidEnter`).invoke('text').should('equal', expected.ionViewDidEnter.toString());
+  cy.get(`${selector} #ionViewWillLeave`).invoke('text').should('equal', expected.ionViewWillLeave.toString());
+  cy.get(`${selector} #ionViewDidLeave`).invoke('text').should('equal', expected.ionViewDidLeave.toString());
+});
+
+Cypress.Commands.add('ionPageVisible', (selector) => {
+  cy.get(selector)
+    .should('have.class', 'ion-page')
+    .should('not.have.class', 'ion-page-hidden')
+    .should('not.have.class', 'ion-page-invisible')
+    .should('have.length', 1);
+});
+
+Cypress.Commands.add('ionPageHidden', (selector) => {
+  cy.get(selector).should('have.class', 'ion-page').should('have.class', 'ion-page-hidden').should('have.length', 1);
+});
+
+Cypress.Commands.add('ionPageDoesNotExist', (selector) => {
+  cy.get(selector).should('not.exist');
+});
+
+Cypress.Commands.add('ionTabClick', (tabText) => {
+  // TODO FW-2790: Figure out how to get rid of wait. It's a workaround for flakiness in CI.
+  cy.wait(250);
+  cy.contains('ion-tab-button', tabText).click({ force: true });
+});

packages/angular/test/base/cypress/support/e2e.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

packages/angular/test/base/cypress/support/index.d.ts

@@ -0,0 +1,74 @@
+/// <reference types="cypress" />
+
+declare namespace Cypress {
+  interface Chainable<Subject> {
+    /**
+     * Swipe to go back on the current selector or router outlet
+     * @example
+     * ```
+     * cy.ionSwipeToGoBack();
+     * cy.ionSwipeToGoBack(true);
+     * ```
+     */
+    ionSwipeToGoBack(complete: boolean, selector: string): Chainable<any>
+    /**
+     * Test that the proper pages are in the navigation stack
+     * @example
+     * ```
+     * cy.testStack('ion-router-outlet', ['app-navigation-page2', 'app-navigation-page1']);
+     * cy.testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1', 'app-tabs-tab1-nested', 'app-tabs-tab2']);
+     * ```
+     */
+    testStack(selector: string, expected: string[]): Chainable<any>
+    /**
+     * Test whether or not the lifecycle events fired
+     * @example
+     * ```
+     * cy.testLifeCycle('app-router-link-page', {
+     *   ionViewWillEnter: 1,
+     *   ionViewDidEnter: 1,
+     *   ionViewWillLeave: 0,
+     *   ionViewDidLeave: 0,
+     * });
+     * ```
+     */
+    testLifeCycle(selector: string, expected: any): Chainable<any>
+
+    /**
+     * Test whether or not an .ion-page element is visible.
+     * Use this to test a page after navigating to it.
+     * @example
+     * ```
+     * cy.ionPageVisible('app-my-page');
+     * ```
+     */
+    ionPageVisible(selector: string): Chainable<any>
+
+    /**
+     * Test whether or not an .ion-page element is hidden
+     * Use this to test a page after navigating away from it.
+     * @example
+     * ```
+     * cy.ionPageHidden('app-my-page');
+     * ```
+     */
+    ionPageHidden(selector: string): Chainable<any>
+
+    /**
+     * Test whether or not an .ion-page element exists.
+     * Use this to test a page after popping it off the stack.
+     * @example
+     * ```
+     * cy.ionPageDoesNotExist('app-my-page');
+     * ```
+     */
+    ionPageDoesNotExist(selector: string): Chainable<any>
+
+    /**
+     * Clicks on a tab button with the given text.
+     */
+    ionTabClick(tabText: string): Chainable<any>;
+  }
+}
+
+