c07312e5ed
Issue number: Resolves #28514 --------- <!-- 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. --> When using the `@ionic/angular` schematic in an Angular 17 project (`ng add @ionic/angular`), developers will receive an error preventing the schematic from running. Additionally, the previous implementations of the schematic are out of sync with the current state of the Ionic starters: - `variables.css` is empty and missing Ionic's defaults - `ionic.config.json` is not created - Schematic does not have support for module vs. standalone projects. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - `ng add @ionic/angular` works with Angular 17 projects - `ng add @ionic/angular` has fallback behavior for Angular 16 projects using `AppModule` - Schematics now includes the proper `variables.css` from Ionic starters - Ionicons assets will no longer be copied when being added to a standalone project - Refactors a majority of the implementation to use the utilities that come directly from `@angular-devkit/schematics` and `@schematics/angular`. - Sets the `@ionic/angular-toolkit` CLI configuration and schematics configuration in the `angular.json` - Creates missing `ionic.config.json` ## 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.5.5-dev.11700239837.1925bbdb` To test this PR: 1. Install Angular CLI v17 - `npm install -g @angular/cli@17` 2. Create a new project - `ng new angular-17` 3. Use the dev-build: - `ng add @ionic/angular@7.5.5-dev.11700239837.1925bbdb` 4. Confirm the prompts 5. Validate that `provideIonicAngular({})` is added to the `app.config.ts` 6. Validate that `ionic.config.json` was created 7. Validate that `angular.json` was updated with the `@ionic/angular-devkit` configurations Now verify legacy behavior: 1. Install Angular CLI v16 - `npm install -g @angular/cli@16` 2. Create a new project - `ng new angular-16` 3. Use the dev-build - `ng add @ionic/angular@7.5.5-dev.11700239837.1925bbdb` 4. Confirm the prompts 5. Validate that `IonicModule.forRoot({})` is added to the `app.module.ts` 8. Validate the ionicons glob pattern is added to the `angular.json` 9. Validate the `ionic.config.json` was created 10. Validate the `angular.json` was updated with the `@ionic/angular-devkit` configurations
@ionic/angular
Ionic Angular specific building blocks on top of @ionic/core components.
Related
License
Testing ng-add in ionic
- Pull the latest from
main - Build ionic/angular:
npm run build - Run
npm linkfromionic/angular/distdirectory - Create a blank angular project
ng new add-test
// Say yes to including the router, we need it
cd add-test
- To run schematics locally, we need the schematics-cli (once published, this will not be needed)
npm install @angular-devkit/schematics-cli
- Link
@ionic/angular
npm link @ionic/angular
- 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.
Project Structure
common
This is where logic that is shared between lazy loaded and standalone components live. For example, the lazy loaded IonPopover and standalone IonPopover components extend from a base IonPopover implementation that exists in this directory.
Note: This directory exposes internal APIs and is only accessed in the standalone and src submodules. Ionic developers should never import directly from @ionic/angular/common. Instead, they should import from @ionic/angular or @ionic/angular/standalone.
standalone
This is where the standalone component implementations live. It was added as a separate entry point to avoid any lazy loaded logic from accidentally being pulled in to the final build. Having a separate directory allows the lazy loaded implementation to remain accessible from @ionic/angular for backwards compatibility.
Ionic developers can access this by importing from @ionic/angular/standalone.
src
This is where the lazy loaded component implementations live.
Ionic developers can access this by importing from @ionic/angular.