mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-01 01:18:27 +08:00
08e3e7ab51
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](b9b345303c/packages/angular/README.md (testing-local-ionic-framework-with-ng-add))
and confirm the error is gone.
--------
`Co-authored-by: soundproofboot <colinedwinbares@gmail.com>`
---------
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
115 lines
3.3 KiB
Markdown
115 lines
3.3 KiB
Markdown
# @ionic/angular
|
|
|
|
Ionic Angular specific building blocks on top of [@ionic/core](https://www.npmjs.com/package/@ionic/core) components.
|
|
|
|
|
|
## Related
|
|
|
|
* [Ionic Core Components](https://www.npmjs.com/package/@ionic/core)
|
|
* [Ionic Documentation](https://ionicframework.com/docs/)
|
|
* [Ionic Discord](https://ionic.link/discord)
|
|
* [Ionic Forum](https://forum.ionicframework.com/)
|
|
* [Ionicons](http://ionicons.com/)
|
|
* [Stencil](https://stenciljs.com/)
|
|
* [Capacitor](https://capacitor.ionicframework.com/)
|
|
|
|
|
|
## License
|
|
|
|
* [MIT](https://raw.githubusercontent.com/ionic-team/ionic/main/LICENSE)
|
|
|
|
## 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
|
|
|
|
**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`.
|