Questions/Observations whilst testing out the Angular Integration for Angular 17

[classicmike]

Hi all.

I have been testing out the Angular Integration for Angular 17 for our upcoming design system implementation at my company. I would just like to put some of my observations and also use them as a basis for asking questions for clarification.

All of the instructions that I have done have been based on the instructions provided on the following page: https://stenciljs.com/docs/angular

From a question of 'Does it work for Projects using Angular 17 onwards?', from my experience and I may need some clarification if any of these are wrong, Yes it does. However, there were a few caveats:

Firstly whilst following the instructions, for earlier versions worked fine, seems like version 17 had a thing where they deprecated the use of Angular Modules in favor for Standalone Components. This meant that especially the instructions for Adding the Angular Output Target is going to be different if the angular workspace where the wrappers are being used is using version 17 onwards, since module files are not created by default. I ended up having to to add a flag when creating the component library project like so: npx -p @angular/cli ng generate library component-library --standalone=false to force the project to add module files in order to proceed. After running through with that the instructions mostly ran without a hitch.

Secondly, not sure if I've done something wrong, it seems like, after following the instructions under Consumer Usage
, I managed to get an app that consumes the component fine when standalone mode is false (i.e: npx -p @angular/cli ng generate app my-app --standalone=false. Again, as an angular user, you have to disable the use of standalone components.

I tried to use the angular wrappers for standalone components, following the instructions from this https://stenciljs.com/docs/angular#consuming-the-angular-wrapper-components-1. Here is a screenshot of the standalone app component with the imported component library module, along with the HTML.

Even with this, the angular app compiles but nothing of the component is rendered. No errors in the console were shown. Screenshot attached below.

So a few questions and comments have come as a result of these tests.

• Based on my first observation, if I want to create the angular wrappers for my component library, is it only possible to do it with out the exported components being standalone?
• If that is the case, would it make sense to explicitly state this standalone=false to make it npx -p @angular/cli ng generate library component-library --standalone=false in the relevant parts of the docuementation?
• If the above process of creating the angular wrappers are meant to work on a project based on Angular 17 without module files, is it possible to add some instructions on that front, to prevent future confusion amongst developers?
• Based on the 2nd observation, is there a step missing in order to get my component up and running for a standalone based consumer project?

I have a link to the git project I was using which is here: https://github.com/classicmike/stencil-framework-integration-test-1. The project structure is as follows under packages:

• stencil-library
• angular-workspace
  • projects
    • component-library - angular wrappers of the stencil library.
    • my-app - consumer project with components that are not standalone
    • my-app-standalone - consumer project with components that are standalone

If there are any questions, comments, happy to listen to them and give a try if needed.
Thanks in advance.