bug: unable to compile using angular's standalone mode

[Loic57]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Stencil Version

4.7.1

Current Behavior

I used stencil components in many angular projects in the past and it always worked fine thanks to this documentation : https://stenciljs.com/docs/angular

But since angular 17 it doesn't work anymore.

I'm not an angular developer, my knowledge is very limited but I noticed something interesting : ng new creates an angular app with a different structure than angular 16, for example there is no more "app.module.ts"

But if you write ng new --no-standalone you can have the same structure than angular 16 with the app.module.ts, great !

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { ComponentLibraryModule } from 'ap-angular-components/projects/component-library/src/lib/component-library.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ComponentLibraryModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

But it still doesn't work, when I use the command ng serve I have this error message :

⠧ Building...X [ERROR] File 'node_modules\ap-angular-components\projects\component-library\src\lib\ap-web-components\components.ts' is missing from the TypeScript compilation. [plugin angular-compiler]

    src/app/app.component.ts:3:20:
      3 │ ...as i1 from "../../node_modules/ap-angular-components/projects/co...
        ╵               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  Ensure the file is part of the TypeScript program via the 'files' or 'include' property.

And I have absolutely no idea what to do to make it work, any ideas ?

Expected Behavior

Able to use my stencil components in angular 17

System Info

System: node 18.17.1
    Platform: windows (10.0.19045)
   CPU Model: 11th Gen Intel(R) Core(TM) i5-11600K @ 3.90GHz (12 cpus)
    Compiler: D:\Documents\web\projets\agile-partner\starter-web-components\node_modules\@stencil\core\compiler\stencil.js
       Build: 1699286313
     Stencil: 4.7.1
  TypeScript: 5.2.2
      Rollup: 2.42.3
      Parse5: 7.1.2
      Sizzle: 2.42.3
      Terser: 5.24.0

Steps to Reproduce

Simply follow this documentation to get some angular wrapped web components : https://stenciljs.com/docs/angular

And try to load them in a blank angular 17 project

Code Reproduction URL

It's quite difficult to provide an url

Additional Information

No response

[rwaskiewicz]

Hey @Loic57 👋

It looks like there are 2 issues being reported here:

1. The Stencil documentation isn't updated to handle Angular 17's standalone mode. I've created https://github.com/ionic-team/stencil-site/issues/1282 to track this and have ingested it into the backlog
2. There also appears to be an issue creating an application without standalone mode. I was able to run through the documentation this morning, and wasn't running into this issue myself. While that doesn't mean there isn't a bug, it does mean that you and I are probably running slightly different steps. For this, we require a minimal reproduction case to move forward with this. Can you please create a new minimal reproduction case and update the GitHub issue summary + comment when you've done so? Thanks!

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Stencil starter component library and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[Loic57]

Hello @rwaskiewicz

Here is a repo : https://github.com/Loic57/angular-17-stencil

• I installed angular 17 with ng new
• I installed my angular components package
• I called my componentes in the src/app/app.module.ts

If you start the app with npm run start you should get a blank screen and if you inspect with browser console you have this error message : main.ts:7 Error: The NgModule 'ComponentLibraryModule' needs to be compiled using the JIT compiler, but '@angular/compiler' is not available.

This error message doesn't exist if you use angular 15 or 16.

Maybe should I build my components in angular 17 ? but will it still work with angular 15 or 16 ?

[rwaskiewicz]

Hey @Loic57

Just to follow up, on a few things:

The Stencil documentation isn't updated to handle Angular 17's standalone mode. I've created https://github.com/ionic-team/stencil-site/issues/1282 to track this and have ingested it into the backlog

We have an open PR for our doc site to update our documentation for Angular Standalone components.

There also appears to be an issue creating an application without standalone mode. I was able to run through the documentation this morning, and wasn't running into this issue myself. While that doesn't mean there isn't a bug, it does mean that you and I are probably running slightly different steps. For this, we require a minimal reproduction case to move forward with this. Can you please create a new minimal reproduction case and update the GitHub issue summary + comment when you've done so? Thanks!

If this is still an issue, can you please do me a favor and create that minimal reproduction case?

Thanks!

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Stencil starter component library and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[Loic57]

@rwaskiewicz have you seen my comment above with the reproduction case link ?

[rwaskiewicz]

@Loic57 I had not. Taking a look at it now, it looks like the reproduction case at https://github.com/Loic57/angular-17-stencil only includes the Angular project itself. In app.module.ts, I would expect the Stencil project + output of the Angular Output Target to be included as well (I'm unable to find ComponentLibraryModule, used here). Is it possible those weren't committed? Or am I looking in the wrong place for these files?

[Loic57]

Hello @rwaskiewicz

I thought the previous repo could help, here is a new one : https://github.com/Loic57/stencil-angular17

So :

• clone the repo
• npm i (you need lerna 8.0.2 to install the dependances of all projects)
• Go to angular-workspace/projects/my-app/src/app/app.component.ts, this is where I import my wrapped angular 17 components
• don't forget to run : npx -p @angular/cli ng build component-library to build the wrapped components lib
• ng serve to start the app and you should see "test" and that's it. If you inspect the markup with your console you'll see two components: and . These two components are empty so they don't display on screen

No error on the console, the app builds correctly so I have no Idea why it's not working.

You can also check the stencil.config.ts in the stencil-storybook folder.

I used this documentation (next) to build my angular library : https://stenciljs.com/docs/next/angular

[rwaskiewicz]

Hey @Loic57 👋

I'm having trouble reproducing the error based on your current instructions. Can you please do me a favor and:

1. Verify that the Angular app was generated with --standalone=false? Starting with Angular 17, standalone is defaulted to true, which might explain some things here. We have an example command here
2. Minimize the reproduction case by removing code unrelated to this issue? Generally speaking, if you can remove a piece of code and the error still persists, that's probably a good indicator it's not needed for a minimal reproduction. Right now, I see a react library package, storybook related code with design tokens that can probably be removed. There's a lot to go through here - if we can get this to as close to the example in https://stenciljs.com/docs/angular#angular-with-modules the better our chances at figuring out what's amiss here

Thanks!

[Loic57]

Hello @rwaskiewicz

1. I tried both versions, with and without --standalone=false. Both failed. The app named "my-app" in angular-workspace has been built with standalone=true as you can see in packages/angular-workspace/projects/my-app/src/app/app.component.ts (there is no .module.ts file)

2. I cleaned everything not related to my issue. Of course the issue is still there.

So, you can pull : https://github.com/Loic57/stencil-angular17

npm i

Go to stencil-storybook folder (there is no storybook anymore) and run : npm run stencil:build Go to angular-workspace folder and run : npx -p @angular/cli ng build component-library Stay in angular-workspace and run ng serve.

A blank page should opened with two web components but nothing appears on screen, you have to inspect the code via the console.

[Loic57]

@rwaskiewicz I'm really sorry to put pressure on your back but did you found some time to watch my repo ? The fact that I can't use my web components in angular since decembre create a big stress on me 😅

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Stencil, please create a new issue and ensure the template is fully filled out.

Thank you for using Stencil!

[christian-bromann]

Hey @Loic57 sorry we haven't gotten back to you. We currently have a lot of competing priorities that prevents us from looking into every issue as much as we would want to. Hence I can not give you any ETA on when we will be able to provide feedback on this. I was able to verify your reproduction case and will ingest this into our backlog.

[tanner-reits]

Hi @Loic57! Sorry for the delay here (and I just realized this issue had been locked so you couldn't comment). I took a look at your reproduction case and figured out the issue. The documentation does not assume you will do a mix of standalone architecture and module architecture. So, in your case importing ComponentLibraryModule in app.component.ts won't work because the custom elements will not be registered.

This is because in the ComponentLibraryModule the documentation has you use the APP_INITIALIZER token to register the elements. But, since that module isn't imported until after application bootstraps, the callback will not be executed, so the element never get registered. So, to fix it, all you need to do is copy that provider object to the app.config.ts:

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    {
      provide: APP_INITIALIZER,
      useFactory: () => defineCustomElements,
      multi: true,
    },
  ],
};

After that, everything should render as expected! Again, sorry for the delay as we have had many competing priorities. Even if you've moved past this, hopefully that teaches you a little bit about Angular's behavior. Happy coding!