Skip to content

chore(angular): test schematics and code-splitting #31401

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
OS-jacobbell wants to merge 8 commits into
base: main
Choose a base branch
from
Draft

chore(angular): test schematics and code-splitting #31401

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
466de9b
chore(angular): test schematics for ng add
OS-jacobbell Aug 17, 2026
d2052cb
add code split test project
OS-jacobbell Aug 21, 2026
0ef4de4
add code-split test automation
OS-jacobbell Aug 24, 2026
5b1ac7f
remove unused svg and update ci test name
OS-jacobbell Aug 24, 2026
4c31a83
move angular package tests to ci build-angular step
OS-jacobbell Aug 24, 2026
d4d9df9
make standalone type exports explicit
OS-jacobbell Aug 24, 2026
0ec8487
apply feedback
OS-jacobbell Aug 26, 2026
1f03469
download core archive in test-angular-package action
OS-jacobbell Aug 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions .github/workflows/actions/test-angular-e2e/action.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,3 +44,11 @@ runs:
run: npm run test
shell: bash
working-directory: ./packages/angular/test/build/${{ inputs.app }}
- name: 🔧 Migrate to per-component standalone imports
run: node ../../../scripts/migrate-per-component-imports.js
shell: bash
working-directory: ./packages/angular/test/build/${{ inputs.app }}
- name: 🧪 Run Tests

@ShaneK ShaneK Aug 26, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: both test steps have the same name, so a failure doesn't say which import style broke. Maybe tag them "(barrel imports)" and "(per-component imports)"? No worries if you'd rather leave it.

run: npm run test
shell: bash
working-directory: ./packages/angular/test/build/${{ inputs.app }}
26 changes: 26 additions & 0 deletions .github/workflows/actions/test-angular-package/action.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
name: 'Build Ionic Angular'

@ShaneK ShaneK Aug 26, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for splitting this out, the job shape looks right now.

Nit: the name and description are still Build Ionic Angular from the action this was copied from, where the siblings are all Test X. The trailing space I mentioned on the old step came across with it. Up to you!

description: 'Build Ionic Angular'
runs:
using: 'composite'
steps:
- uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
with:
node-version: 24.x
- uses: ./.github/workflows/actions/download-archive
with:
name: ionic-core
path: ./core
filename: CoreBuild.zip
- uses: ./.github/workflows/actions/download-archive
with:
name: ionic-angular
path: ./packages/angular
filename: AngularBuild.zip
- name: 🕸️ Install Angular Dependencies
run: npm ci

@ShaneK ShaneK Aug 26, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This job pulls down CoreBuild.zip but the schematics test never gets to it. The ng add step installs the packed @ionic/angular, and its @ionic/core dependency is ^9.0.0, so the generated project resolves core from the registry rather than from the PR, 9.0.1 today.

That means the new build step checks this PR's Angular against released core. A PR that adds a core export the Angular types reference fails here with a confusing "has no exported member", and a core change that breaks Angular goes green.

A plain npm run sync won't fix it, since the generated project is its own npm install. I think verify-schematics.js would need to pack core and install that tarball into the test project before the build, roughly what the fixture's sync.sh already does.

shell: bash
working-directory: ./packages/angular
- name: 📐 Run Angular Package Tests
run: npm run test
shell: bash
working-directory: ./packages/angular
7 changes: 7 additions & 0 deletions .github/workflows/build.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,13 @@ jobs:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
- uses: ./.github/workflows/actions/build-angular

test-angular-package:
needs: [build-angular]
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
- uses: ./.github/workflows/actions/test-angular-package

build-angular-server:
needs: [build-core]
runs-on: ubuntu-latest
Expand Down
13 changes: 11 additions & 2 deletions packages/angular/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,10 @@
"prerelease": "npm run validate && np prerelease --yolo --any-branch --tag next",
"sync": "./scripts/sync.sh",
"local.sync.and.pack": "./scripts/sync-and-pack.sh",
"test": "echo 'angular no tests yet'",
"validate": "npm i && npm run lint && npm run test && npm run build",
"test": "npm run test.schematics && npm run test.code-split",
"test.code-split": "node ./scripts/test-code-split.js",
"test.schematics": "node ./scripts/verify-schematics.js",
"validate": "npm i && npm run lint && npm run build && npm run test && npm run validate.package",
"validate.package": "node scripts/verify-exports.js"
},
"exports": {
Expand Down Expand Up @@ -141,6 +143,13 @@
"./ion-title": "./dist/standalone/directives/ion-title.js",
"./ion-toast": "./dist/standalone/directives/ion-toast.js",
"./ion-toolbar": "./dist/standalone/directives/ion-toolbar.js",
"./dom-controller": "./dist/common/providers/dom-controller.js",
"./nav-controller": "./dist/common/providers/nav-controller.js",
"./config": "./dist/common/providers/config.js",
"./platform": "./dist/common/providers/platform.js",
"./nav-params": "./dist/common/directives/navigation/nav-params.js",
"./ion-modal-token": "./dist/common/providers/angular-delegate.js",

@ShaneK ShaneK Aug 25, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The six subpaths above this are bare kebab-case and needed no exclusion. This one takes the ion- prefix but it's a DI token rather than a component, and that's the only reason KNOWN_NON_CORE_ION_COMPONENTS had to be added to the verifier I asked for on the exports PR.

It also points at angular-delegate.js, which exports more than the token. Running the codemod with --print-map sends AngularDelegate and attachView to @ionic/angular/ion-modal-token, so someone's AngularDelegate import gets rewritten to a path named after a modal token.

Calling it ./modal-token matches the siblings and lets the exclusion list go away. Free to change now, breaking once it's released.

@OS-jacobbell OS-jacobbell Aug 26, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm confused about this one, AngularDelegate and attachView don't seem to be exported for the standalone components API. Should I make a barrel file that only exports IonModalToken?

The other import paths match the imported class name. It seems confusing to have to import IonModalToken from @ionic/angular/modal-token when everything else would have you expect @ionic/angular/ion-modal-token.

@ShaneK ShaneK Aug 26, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're right on both counts, and my suggestion was wrong. The ionic-route-strategy entry right below it is kebab-case of the exported name too, so ion-modal-token follows the same rule. And nobody can import AngularDelegate from the barrel anyway, since the main entry resolves to the standalone index which only re-exports the token, so the codemod can't rewrite it in real code even though it turns up in the printed map.

The bit that does still stand is smaller. This subpath publishes angular-delegate.js as an entry point, so AngularFrameworkDelegate, attachView and bindLifecycleEvents become importable from it too, and that's public API once it's released. It's also why the verifier needed the new non-core whitelist. A barrel file exporting just the token, like you suggested, would sort both.

"./ionic-route-strategy": "./dist/common/utils/routing.js",
"./action-sheet-controller": "./dist/standalone/providers/action-sheet-controller.js",
"./alert-controller": "./dist/standalone/providers/alert-controller.js",
"./animation-controller": "./dist/standalone/providers/animation-controller.js",
Expand Down
Loading
Loading