fix(angular): update schematics to support Angular's latest build system (#30525)

Issue number: resolves ionic-team/ionic-docs#2091

---------

## What is the current behavior?
Documentation to test `ng add` schematic for @ionic/angular is outdated
& it fails when running with:
```
Invalid projectType for my-app: undefined
```

## What is the new behavior?
Fix the schematic to support the latest Angular build system & update
the documentation for testing local Ionic Framework with `ng add`.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

_I am using `Angular CLI: 20.0.4`_

Run these commands first to see the error: 
```sh
ng new my-app --style=css --ssr=false --zoneless=false
cd my-app
ng add @ionic/angular --skip-confirmation
```

Switch to this branch (`fix-angular-schematics`) and then follow the
[new
steps](https://github.com/ionic-team/ionic-framework/blob/b9b345303c7e1446a990c11a8ae6f70c1f773493/packages/angular/README.md#testing-local-ionic-framework-with-ng-add)
and confirm the error is gone.

--------

`Co-authored-by: soundproofboot <[email protected]>`

---------

Co-authored-by: Brandy Smith <[email protected]>

Author: brandyscarney

packages/angular/README.md

@@ -18,40 +18,80 @@ Ionic Angular specific building blocks on top of [@ionic/core](https://www.npmjs
 
 * [MIT](https://raw.githubusercontent.com/ionic-team/ionic/main/LICENSE)
 
-## Testing ng-add in ionic
-
-1. Pull the latest from `main`
-2. Build ionic/angular: `npm run build`
-3. Run `npm link` from `ionic/angular/dist` directory
-4. Create a blank angular project
-
-```
-ng new add-test
-// Say yes to including the router, we need it
-cd add-test
-```
-
-5. To run schematics locally, we need the schematics-cli (once published, this will not be needed)
-
-```
-npm install @angular-devkit/schematics-cli
-```
-
-6. Link `@ionic/angular`
-
-```
-npm link @ionic/angular
-```
-
-
-7. Run the local copy of the ng-add schematic
-
-```
-$ npx schematics @ionic/angular:ng-add
-```
-
-
-You'll now be able to add ionic components to a vanilla Angular app setup.
+## Testing Local Ionic Framework with `ng add`
+
+This guide shows you how to test the local Ionic Framework build with a new Angular application using `ng add`. This is useful for development and testing changes before publishing.
+
+### Prerequisites
+
+- Node.js and npm installed
+- Angular CLI installed globally (`npm install -g @angular/cli`)
+
+### Build Local Ionic Framework
+
+1. Clone the repository (if not already done):
+    ```sh
+    git clone https://github.com/ionic-team/ionic-framework.git
+    cd ionic-framework
+    ```
+
+2. Pull the latest from `main`
+    ```sh
+    git pull origin main
+    ```
+
+3. Install dependencies and build the `core` package:
+    ```sh
+    cd core
+    npm install
+    npm run build
+    ```
+
+4. Install dependencies, sync the `core` build and build the Angular package:
+    ```sh
+    cd ../packages/angular
+    npm install
+    npm run sync
+    npm run build
+    ```
+
+5. Create a tarball:
+    ```sh
+    cd dist
+    npm pack
+    ```
+
+6. Copy the tarball to Downloads:
+    ```sh
+    cp ionic-angular-*.tgz ~/Downloads/ionic-angular.tgz
+    ```
+
+### Test with New Angular App
+
+7. Create a new Angular app:
+    ```sh
+    # Change to whichever directory you want the app in
+    cd ~/Documents/
+    ng new my-app --style=css --ssr=false --zoneless=false
+    cd my-app
+    ```
+
+8. Install the local `@ionic/angular` package:
+    ```sh
+    npm install ~/Downloads/ionic-angular.tgz
+    ```
+
+9. Run `ng add`:
+    ```sh
+    ng add @ionic/angular --skip-confirmation
+    ```
+
+10. Serve the app:
+    ```sh
+    ng serve
+    ```
+
+The local Ionic Framework build is now active in the Angular app. Changes to the Ionic source code require rebuilding the packages and reinstalling the tarball to see updates.
 
 ## Project Structure
 

packages/angular/src/schematics/utils/config.ts

@@ -17,12 +17,15 @@ export function writeConfig(host: Tree, config: JsonObject): void {
 function isAngularBrowserProject(projectConfig: any): boolean {
   if (projectConfig.projectType === 'application') {
     const buildConfig = projectConfig.architect.build;
+
     // Angular 16 and lower
-    const legacyAngularBuilder = buildConfig.builder === '@angular-devkit/build-angular:browser';
-    // Angular 17+
-    const modernAngularBuilder = buildConfig.builder === '@angular-devkit/build-angular:application';
+    const legacyBrowserBuilder = buildConfig.builder === '@angular-devkit/build-angular:browser';
+    // Angular 17
+    const legacyApplicationBuilder = buildConfig.builder === '@angular-devkit/build-angular:application';
+    // Angular 18+
+    const modernApplicationBuilder = buildConfig.builder === '@angular/build:application';
 
-    return legacyAngularBuilder || modernAngularBuilder;
+    return legacyBrowserBuilder || legacyApplicationBuilder || modernApplicationBuilder;
   }
 
   return false;