Working with Stencil.js components requires extra setup

[riker09]

Command

serve

Is this a regression?

• [ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

As stated in issue #26345 setting up Angular 17 with Stencil.js components needs some extra configuration, which is anything but obvious. Also, the mentioned ticked was locked due to inactivity, but aside from a workaround no work seems to have been done to solve the issue.

Minimal Reproduction

The reproduction repo is taken from the other repo: https://github.com/zerock54/Angular-17-esbuild-Stencil-ng-serve-issue

Exception or Error

No response

Your Environment

Angular CLI: 17.0.10
Node: 18.16.1
Package Manager: npm 9.5.1
OS: win32 x64

Angular: 17.0.9
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.10
@angular-devkit/build-angular   17.0.10
@angular-devkit/core            17.0.10
@angular-devkit/schematics      17.0.10
@angular/cli                    17.0.10
@schematics/angular             17.0.10
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.3

Anything else relevant?

The workaround provided in the other issue does work, but as mentioned by comment https://github.com/angular/angular-cli/issues/26345#issuecomment-1842761606 I had to disable the Angular cache.

[alan-agius4]

Hi @riker09,

Adding the below config as mentioned in https://stenciljs.com/docs/config-extras#enableimportinjection does work even with cache enabled.

  extras: {
    enableImportInjection: true,
  },

[alan-agius4]

If the problem is that the changes to the components is not reflected in the browser. This is expected and since you are using npm link, you need to specify the linked library in the tsconfig path mappings. This will cause the library to be bundled as part of the application and not handled by vite optimizer.

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
     ...
    "paths": {
      "test-compo/loader": ["./node_modules/test-compo/loader"]
    }
}

[riker09]

Okay, I have to admit, I don't have a strong clue about what's going on here. I basically did what most web devs do and copied and pasted code from the intarwebz until things worked for me. 😅 Turns out I did a bad job at that, so apologies.

Seems I don't actually got the Stencil config setup correctly and only disabling the Angular cache solved it for me. So in truth I didn't actually fix the problem (yet). Digging deeper...🧑‍🏭

[riker09]

Clarification: I actually don't use Stencil myself. It's a closed-source third-party component library that uses Stencil.js itself.

[riker09]

I will take it up with the authors of the third-party library. Thanks for your quick reply!

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}