Skip to content

test(angular): update test app to account for standalone components - #27867

Merged
liamdebeasi merged 27 commits into
FW-4612from
4612-test
Jul 28, 2023
Merged

test(angular): update test app to account for standalone components#27867
liamdebeasi merged 27 commits into
FW-4612from
4612-test

Conversation

@liamdebeasi

@liamdebeasi liamdebeasi commented Jul 26, 2023

Copy link
Copy Markdown
Contributor

Issue number: N/A


What is the current behavior?

We do not have a way of testing Ionic UI standalone components isolated from the regular lazy loaded bundle

What is the new behavior?

In order to test standalone components isolated from the lazy loaded components, we need to and environment where the lazy loaded components never get initialized. As a result, I made the following changes:

  1. Created two routes: /lazy and /standalone. Any /lazy/* routes will have IonicModule initialized at the root: https://github.com/ionic-team/ionic-framework/pull/27867/files#diff-174033d040c9d2279d515398002826936441e7892b50ecde6a815fb719c48b9eR9-R18. Any /standalone/* routes will not have IonicModule initialized.
  2. Updated any URL references to ensure the /lazy prefix is added. For example, /accordions is now /lazy/accordions.
  3. Created an app-lazy component. This renders IonApp and IonRouterOutlet using the lazy components. All lazy routes are rendered as children of this component.
  4. Created an app-standalone component. This renders a regular router-outlet for now as a placeholder (since we don't have any Ionic UI components as standalone at the moment). But the idea here is that team members will be able to create routes here to test standalone UI components.

Does this introduce a breaking change?

  • Yes
  • No

Other information

@bolt-new-by-stackblitz

Copy link
Copy Markdown

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@github-actions github-actions Bot added the package: angular @ionic/angular package label Jul 26, 2023
@liamdebeasi liamdebeasi changed the title 4612 test test(angular): update test app to account for standalone components Jul 26, 2023
@liamdebeasi
liamdebeasi marked this pull request as ready for review July 27, 2023 14:21
@liamdebeasi
liamdebeasi requested review from a team, averyrousseau and sean-perkins and removed request for a team July 27, 2023 14:21
})
export class TestComponent {
constructor() {
console.log('This should be undefined:', customElements.get('ion-app'));

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.

This is a placeholder for now to verify that the IonicModule is not being defined

path: 'form-controls/range',
loadChildren: () => import('./form-controls/range/range.module').then(m => m.RangeModule)
}
{ path: 'lazy', loadChildren: () => import('./app-lazy/app.module').then(m => m.AppModule) },

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

~ Should we add a default match path to redirect to a known route? Otherwise when serving the app you need to know to go to /lazy/something or /standalone/something?

e.g.:

{
  path: '',
  pathMatch: 'full',
  redirectTo: '/lazy'
}

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.

Good call. I updated this in 85cac11

Base automatically changed from 4612-infra to FW-4612 July 27, 2023 17:37
@liamdebeasi
liamdebeasi merged commit af68808 into FW-4612 Jul 28, 2023
@liamdebeasi
liamdebeasi deleted the 4612-test branch July 28, 2023 14:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: angular @ionic/angular package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants