feat: Upgraded component-library-angular to Angular 20 and added a new Angular app to example-project by gratzl-dev · Pull Request #652 · stenciljs/output-targets

gratzl-dev · 2025-06-12T14:10:03Z

Pull request checklist

Please check if your PR fulfills the following requirements:

Tests for the changes have been added (for bug fixes / features)
Docs have been reviewed and added / updated if needed (for bug fixes / features)
Build (npm run build) was run locally for affected output targets
^On this note, the build only works if ng-app is run last, this is accounted for in the build script.. But the solution is not pretty. Maybe somebody has a better idea
Tests (npm test) were run locally and passed
Prettier (npm run prettier) was run locally and passed

Pull request type

Please check the type of change your PR introduces:

What is the current behavior?

example-project's component-library-angular uses angular 16 and relies heavily on Angular Modules instead of standalone components, which are the default way to go since Angular 17.

Furthermore, there is no current angular demo application, making it difficult to debug angular output issues, for other bug fixes, such as #54 in my case

What is the new behavior?

replaced existing component-library-angular with newly generated angular library (read more here: https://angular.dev/tools/libraries/creating-libraries)
the angular library now uses ng-packagr instead of ngc to build the bundle
- this is the default for current libraries (see link above)
set the stencil.config angular outputType to standalone, since that should be the default for most cases
migrated existing jest tests to use standalone testbed fixture components
created ng-app, a angular 20 application using the minimal create option
fixed typescript errors for ValueAccessors
- target could be null and .checked is not a known type of InputEvent

Does this introduce a breaking change?

Yes
No

This PR (almost) only affects the example-project, except the typescript fix, which does not affect the functionality

Other information

It is a big jump from angular 16 to angular 20, but this PR would allow future modifications and fixes to the angular output package.

If you have any questions or concerns about this PR, feel free to ping me on discord @gratzl

… any conversation otherwise an error during the build will occur

see https://angular.dev/tools/libraries/creating-libraries

…rary package.json, fixed

otherwise it tries to build parallel to the library build scripts, causing the angular compiler to fail does anybody have a better solution? :(

// TODO adjust generators

christian-bromann

First off, thanks a ton 🫶 I've never used Angular so I always pushed this to the back burner. This is super helpful, thanks a lot!

Aside from the inline comments, I have a more general questions:

In the example-project/component-library-angular project, is there any advantage of using Angular's multiple project file structure? I am sure this makes sense when building a large scale Angular project but for this context I wonder if it creates complexity - I am asking also because it is currently how we have setup our designsystem-boilerplate and I wonder if this makes sense there too

christian-bromann · 2025-06-12T18:25:57Z

...-project/component-library-angular/projects/library/src/directives/boolean-value-accessor.ts

      multi: true
    }
-  ]
+  ],standalone: true


Can we update the template to put this into a new line?

Suggested change

],standalone: true

],

standalone: true

I was contemplating to change it, but didn't want to bloat up the PR with unrelated stuff.
I think it would be wise to clean up the template generators when implementing this: #648

example-project/component-library-angular/projects/library/test/my-range.spec.ts

example-project/ng-app/src/app/component-tests/checkbox-tests/checkbox-tests.html

example-project/ng-app/src/app/component-tests/complex-props-tests/complex-props-tests.ts

christian-bromann · 2025-06-12T18:28:42Z

example-project/ng-app/src/app/component-tests/input-form-tests/input-form-tests.html

+  </div>
+</form>
+
+{{ formGroup.getRawValue() | json }}


Is this just printing out the raw value as text?

yes, to show that the form properties are updated correctly

…checkbox-tests.html Co-authored-by: Christian Bromann <git@bromann.dev>

…ests/complex-props-tests.ts Co-authored-by: Christian Bromann <git@bromann.dev>

…t/my-range.spec.ts Co-authored-by: Christian Bromann <git@bromann.dev>

gratzl-dev · 2025-06-13T08:34:16Z

First off, thanks a ton 🫶 I've never used Angular so I always pushed this to the back burner. This is super helpful, thanks a lot!

Aside from the inline comments, I have a more general questions:

In the example-project/component-library-angular project, is there any advantage of using Angular's multiple project file structure? I am sure this makes sense when building a large scale Angular project but for this context I wonder if it creates complexity - I am asking also because it is currently how we have setup our designsystem-boilerplate and I wonder if this makes sense there too

Thank you for taking the time to review my pull request!

The way the angular workspace is set up now, is simply how the angular team defines libraries to be set up.
Other than, let's say react, angular has a stricter eco-system where there are standards which the developers should follow.
This PR ensures that this project now also follows the angular convention.

Also, looking at the designsystem-boilerplate, this "modernized" project structure is already in place there, so that's good.
But a version upgrade would not hurt there aswell, since it's still on angular 15 😄

…ry project + npm run prettier

gratzl-dev · 2025-06-13T10:01:38Z

Also I just had a idea to consider...

Would it be possible to use the designsystem-boilerplate repo as a submodule in place of the example-project?

Then there would only be one example repo which needs to be maintained

christian-bromann

LGTM 👍

christian-bromann · 2025-06-13T15:13:49Z

Then there would only be one example repo which needs to be maintained

I did consider that but recognised that the example projects we have here are straight for testing, e.g. for React I created a little testbed to run validations for all React variations easily. I don't want to bloat up the boilerplate with that and rather keep it basic.

christian-bromann · 2025-06-13T15:14:32Z

Let me investigate the build issue:

Failed downloading chromedriver v137.0.7151.55 using {"cacheDir":"/tmp","buildId":"137.0.7151.55","platform":"linux","browser":"chromedriver","unpack":true}: The browser folder (/tmp/chromedriver/linux-137.0.7151.55) exists but the executable (/tmp/chromedriver/linux-137.0.7151.55/chromedriver-linux64/chromedriver) is missing

This seems unrelated to your change. I will go ahead and merge this and then fix it on main.

## [0.2.0](https://github.com/stenciljs/output-targets/compare/@stencil/ssr@0.1.0...@stencil/ssr@0.2.0) (2026-01-03) ### 🚀 Enhancement * **react:** enhance React output target with unified server/client imports and improved SSR property serialization ([132f9d9](132f9d9)) * Upgraded component-library-angular to Angular 20 and added a new Angular app to example-project ([#652](#652)) ([a6fefb6](a6fefb6)), closes [#643](#643) * **vue:** implement custom event property as source for v-model ([#689](#689)) ([bc385bb](bc385bb)) ### 🐛 Bug Fix * **#646:** react create components.ts file ([#647](#647)) ([7524cbf](7524cbf)), closes [#646](#646) [#646](#646) * **angular:** include outputs in angular component definition ([#688](#688)) ([16f1fd1](16f1fd1)), closes [#643](#643) [#643](#643) * **angular:** prettify code ([69e1cba](69e1cba)) * **angular:** use forwardRef in control value accessor directives. ([#697](#697)) ([dcb4bd2](dcb4bd2)) * **ci:** run in macos environment ([0631306](0631306)) * **dependabot:** don't run updates based on projects ([3d43687](3d43687)) * **dependabot:** group updates of minor and patch versions in a single PR ([47bdb20](47bdb20)) * **dependabot:** optimize configuration ([ce29757](ce29757)) * **internal:** update changelog ([4bb6cfc](4bb6cfc)) * nuxt ssr mismatch class errors ([#651](#651)) ([be797b1](be797b1)) * **react:** always use per-component CustomEvent types for event props ([#716](#716)) ([8ebba85](8ebba85)), closes [#531](#531) * **react:** better style to css transformation ([ccc76a7](ccc76a7)) * **react:** fixed wording in component wrapper ([a83bb4b](a83bb4b)) * **react:** forward ref to underlying web component ([#655](#655)) ([9f20ee0](9f20ee0)) * **react:** improved SSR for Next.js ([#683](#683)) ([c49a3b5](c49a3b5)) * **react:** make types compatible with v18 and v19 ([f887ae7](f887ae7)) * **react:** properly type generated component files ([3e7cc0c](3e7cc0c)) * **react:** revive esModules option ([d98df24](d98df24)) * revert model update event renaming ([#649](#649)) ([5c67692](5c67692)) * **ssr:** improved SSR handling in Next.js ([#641](#641)) ([22e075f](22e075f)) * **vue:** remove unnecessary vue patch ([34f7ce2](34f7ce2)) ### 📝 Documentation * **internal:** link release workflow ([0e69d0e](0e69d0e)) * **internal:** update contributing guidelines ([08c96fd](08c96fd))

* chore(release): @stencil/vue-output-target@0.11.0 [skip ci] ## [0.11.0](https://github.com/stenciljs/output-targets/compare/@stencil/vue-output-target@0.10.8...@stencil/vue-output-target@0.11.0) (2026-01-03) ### 🚀 Enhancement * **react:** enhance React output target with unified server/client imports and improved SSR property serialization ([132f9d9](132f9d9)) * **vue:** implement custom event property as source for v-model ([#689](#689)) ([bc385bb](bc385bb)) ### 🐛 Bug Fix * **angular:** include outputs in angular component definition ([#688](#688)) ([16f1fd1](16f1fd1)), closes [#643](#643) [#643](#643) * **angular:** prettify code ([69e1cba](69e1cba)) * **angular:** use forwardRef in control value accessor directives. ([#697](#697)) ([dcb4bd2](dcb4bd2)) * **dependabot:** don't run updates based on projects ([3d43687](3d43687)) * **dependabot:** group updates of minor and patch versions in a single PR ([47bdb20](47bdb20)) * **dependabot:** optimize configuration ([ce29757](ce29757)) * **internal:** update changelog ([4bb6cfc](4bb6cfc)) * **react:** always use per-component CustomEvent types for event props ([#716](#716)) ([8ebba85](8ebba85)), closes [#531](#531) * **react:** better style to css transformation ([ccc76a7](ccc76a7)) * **react:** forward ref to underlying web component ([#655](#655)) ([9f20ee0](9f20ee0)) * **react:** improved SSR for Next.js ([#683](#683)) ([c49a3b5](c49a3b5)) * **react:** properly type generated component files ([3e7cc0c](3e7cc0c)) * **vue:** remove unnecessary vue patch ([34f7ce2](34f7ce2)) ### 📝 Documentation * **internal:** link release workflow ([0e69d0e](0e69d0e)) * **internal:** update contributing guidelines ([08c96fd](08c96fd)) * chore(release): @stencil/react-output-target@1.2.1 [skip ci] ## [1.2.1](https://github.com/stenciljs/output-targets/compare/@stencil/react-output-target@1.2.0...@stencil/react-output-target@1.2.1) (2026-01-03) ### 🚀 Enhancement * **vue:** implement custom event property as source for v-model ([#689](#689)) ([bc385bb](bc385bb)) ### 🐛 Bug Fix * **angular:** include outputs in angular component definition ([#688](#688)) ([16f1fd1](16f1fd1)), closes [#643](#643) [#643](#643) * **angular:** use forwardRef in control value accessor directives. ([#697](#697)) ([dcb4bd2](dcb4bd2)) * **react:** always use per-component CustomEvent types for event props ([#716](#716)) ([8ebba85](8ebba85)), closes [#531](#531) ### 📝 Documentation * **internal:** link release workflow ([0e69d0e](0e69d0e)) * **internal:** update contributing guidelines ([08c96fd](08c96fd)) * chore(release): @stencil/ssr@0.2.0 [skip ci] ## [0.2.0](https://github.com/stenciljs/output-targets/compare/@stencil/ssr@0.1.0...@stencil/ssr@0.2.0) (2026-01-03) ### 🚀 Enhancement * **react:** enhance React output target with unified server/client imports and improved SSR property serialization ([132f9d9](132f9d9)) * Upgraded component-library-angular to Angular 20 and added a new Angular app to example-project ([#652](#652)) ([a6fefb6](a6fefb6)), closes [#643](#643) * **vue:** implement custom event property as source for v-model ([#689](#689)) ([bc385bb](bc385bb)) ### 🐛 Bug Fix * **#646:** react create components.ts file ([#647](#647)) ([7524cbf](7524cbf)), closes [#646](#646) [#646](#646) * **angular:** include outputs in angular component definition ([#688](#688)) ([16f1fd1](16f1fd1)), closes [#643](#643) [#643](#643) * **angular:** prettify code ([69e1cba](69e1cba)) * **angular:** use forwardRef in control value accessor directives. ([#697](#697)) ([dcb4bd2](dcb4bd2)) * **ci:** run in macos environment ([0631306](0631306)) * **dependabot:** don't run updates based on projects ([3d43687](3d43687)) * **dependabot:** group updates of minor and patch versions in a single PR ([47bdb20](47bdb20)) * **dependabot:** optimize configuration ([ce29757](ce29757)) * **internal:** update changelog ([4bb6cfc](4bb6cfc)) * nuxt ssr mismatch class errors ([#651](#651)) ([be797b1](be797b1)) * **react:** always use per-component CustomEvent types for event props ([#716](#716)) ([8ebba85](8ebba85)), closes [#531](#531) * **react:** better style to css transformation ([ccc76a7](ccc76a7)) * **react:** fixed wording in component wrapper ([a83bb4b](a83bb4b)) * **react:** forward ref to underlying web component ([#655](#655)) ([9f20ee0](9f20ee0)) * **react:** improved SSR for Next.js ([#683](#683)) ([c49a3b5](c49a3b5)) * **react:** make types compatible with v18 and v19 ([f887ae7](f887ae7)) * **react:** properly type generated component files ([3e7cc0c](3e7cc0c)) * **react:** revive esModules option ([d98df24](d98df24)) * revert model update event renaming ([#649](#649)) ([5c67692](5c67692)) * **ssr:** improved SSR handling in Next.js ([#641](#641)) ([22e075f](22e075f)) * **vue:** remove unnecessary vue patch ([34f7ce2](34f7ce2)) ### 📝 Documentation * **internal:** link release workflow ([0e69d0e](0e69d0e)) * **internal:** update contributing guidelines ([08c96fd](08c96fd)) * chore: * Update CHANGELOG.md --------- Co-authored-by: semantic-release-bot <semantic-release-bot@martynus.net> Co-authored-by: John Jenkins <johnljenkins@Hotmail.com> Co-authored-by: John Jenkins <john.jenkins@nanoporetech.com>

Alexander Gratzl added 14 commits June 12, 2025 11:44

fixed target can be null error and used bracket notation for implicit…

5646f4d

… any conversation otherwise an error during the build will occur

changed value accessor selector

0237066

removed outdated angular library using ngc and angular 16

b7b8a03

regenerated angular library using latest ng generate templates

065c944

see https://angular.dev/tools/libraries/creating-libraries

added new angular consumer app

44bad83

fixed ng-app using correct package contents by including files in lib…

1eaca3f

…rary package.json, fixed

removed triggered booleran and renamed ngModel boolean

1c697b5

fixed build script by building ng-app last

1edc04e

otherwise it tries to build parallel to the library build scripts, causing the angular compiler to fail does anybody have a better solution? :(

fixed value accessor tests

d11c122

updated jest config and made component tests standalone

88ea4bf

// TODO adjust generators

fixed failing tests

ae9f52b

fixed onInput having no property

e156bde

added more component test cases for angular consumer

7b1d69b

ran prettier

5bb5c18

gratzl-dev changed the base branch from next to main June 12, 2025 14:11

gratzl-dev requested a review from a team as a code owner June 12, 2025 14:11

christian-bromann reviewed Jun 12, 2025

View reviewed changes

gratzl-dev and others added 3 commits June 13, 2025 10:09

Update example-project/ng-app/src/app/component-tests/checkbox-tests/…

0d310dd

…checkbox-tests.html Co-authored-by: Christian Bromann <git@bromann.dev>

Update example-project/ng-app/src/app/component-tests/complex-props-t…

a97cf1b

…ests/complex-props-tests.ts Co-authored-by: Christian Bromann <git@bromann.dev>

Update example-project/component-library-angular/projects/library/tes…

08d2518

…t/my-range.spec.ts Co-authored-by: Christian Bromann <git@bromann.dev>

Alexander Gratzl added 2 commits June 13, 2025 11:08

added scripts back in, i accidentally removed when regenerating libra…

7baee3f

…ry project + npm run prettier

added jest test in preperations of fixing stenciljs#643

47c2644

christian-bromann approved these changes Jun 13, 2025

View reviewed changes

christian-bromann merged commit a6fefb6 into stenciljs:main Jun 13, 2025
1 of 3 checks passed

christian-bromann mentioned this pull request Jun 27, 2025

fix(angular): Allow different boolean value accessor attribute #17

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: Upgraded component-library-angular to Angular 20 and added a new Angular app to example-project#652

feat: Upgraded component-library-angular to Angular 20 and added a new Angular app to example-project#652
christian-bromann merged 19 commits intostenciljs:mainfrom
gratzl-dev:feature/ng-consumer-app

gratzl-dev commented Jun 12, 2025

Uh oh!

christian-bromann left a comment

Uh oh!

christian-bromann Jun 12, 2025

Uh oh!

gratzl-dev Jun 13, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

christian-bromann Jun 12, 2025

Uh oh!

gratzl-dev Jun 13, 2025

Uh oh!

gratzl-dev commented Jun 13, 2025

Uh oh!

gratzl-dev commented Jun 13, 2025

Uh oh!

christian-bromann left a comment

Uh oh!

christian-bromann commented Jun 13, 2025

Uh oh!

christian-bromann commented Jun 13, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

gratzl-dev commented Jun 12, 2025

Pull request checklist

Pull request type

What is the current behavior?

What is the new behavior?

Does this introduce a breaking change?

Other information

Uh oh!

christian-bromann left a comment

Choose a reason for hiding this comment

Uh oh!

christian-bromann Jun 12, 2025

Choose a reason for hiding this comment

Uh oh!

gratzl-dev Jun 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

christian-bromann Jun 12, 2025

Choose a reason for hiding this comment

Uh oh!

gratzl-dev Jun 13, 2025

Choose a reason for hiding this comment

Uh oh!

gratzl-dev commented Jun 13, 2025

Uh oh!

gratzl-dev commented Jun 13, 2025

Uh oh!

christian-bromann left a comment

Choose a reason for hiding this comment

Uh oh!

christian-bromann commented Jun 13, 2025

Uh oh!

christian-bromann commented Jun 13, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

gratzl-dev Jun 13, 2025 •

edited

Loading