504 Outdated Optimize Dep with esbuild when using Stencil components

[zerock54]

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

17

Description

Hi,

I am trying to convert my project to use the new build system but I am facing an issue when running ng serve.
I get these errors in the browser's console:

In fact, all the imports errors point to some Stencil components

I tried to clean the .angular cache but the same issue occurs

Thanks

Minimal Reproduction

https://github.com/zerock54/Angular-17-esbuild-Stencil-ng-serve-issue

Exception or Error

No response

Your Environment

Angular CLI: 17.0.0
Node: 18.13.0
Package Manager: npm 8.19.3
OS: darwin arm64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.0
@angular-devkit/build-angular   17.0.0
@angular-devkit/core            17.0.0
@angular-devkit/schematics      17.0.0
@angular/cli                    17.0.0
@schematics/angular             17.0.0
rxjs                            7.5.7
typescript                      5.2.2
zone.js                         0.14.2

Anything else relevant?

No response

EDIT: add repro

[clydin]

This appears to be a bug but we will need to look at a reproduction to find and fix the problem. Can you setup a minimal reproduction please?

You can read here why this is needed. A good way to make a minimal reproduction is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

[zerock54]

Here is a full reproduction: https://github.com/zerock54/Angular-17-esbuild-Stencil-ng-serve-issue

I basically just created an Angular app and a Stencil component. I tried to use the component in my app and the error showed up during ng serve.

Installation instructions are in the repo's readme file

Thanks

[alan-agius4]

Hi @zerock54, it appears that the reproduction provided is broken.

npm start

> esbuild-test@0.0.0 start
> ng serve

⠦ Building...✘ [ERROR] TS2307: Cannot find module 'test-compo/loader' or its corresponding type declarations. [plugin angular-compiler]

    src/main.ts:5:53:
      5 │ ... { applyPolyfills, defineCustomElements } from 'test-compo/loader';
        ╵                                                   ~~~~~~~~~~~~~~~~~~~


Application bundle generation failed. [2.943 seconds]

[zerock54]

Hi @alan-agius4,

Indeed, I forgot to mention that you have to build the lib first...
I modified the readme file but here are the updated instructions:

- Run `npm --prefix ./esbuild-test install && npm --prefix ./test-compo install`
- In `test-compo`, run `npm run build`
- In `test-compo`, run `npm link`
- In `esbuild-test`, run `npm link test-compo`
- In `esbuild-test`, run `npm run start`

Sorry about that
Thanks

[alan-agius4]

Looks like for Stencil to be used with Vite you need to enable additional flags. See: https://stenciljs.com/docs/config-extras#enableimportinjection

import { Config } from '@stencil/core';

export const config: Config = {
  namespace: 'test-compo',
  extras: {
    enableImportInjection: true,
  },
  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: '../loader',
    },
    {
      type: 'dist-custom-elements',
    },
    {
      type: 'docs-readme',
    },
    {
      type: 'www',
      serviceWorker: null, // disable service workers
    },
  ],
  testing: {
    browserHeadless: "new",
  },
};

[zerock54]

@alan-agius4 great, thanks !!

[Rahza]

Looks like for Stencil to be used with Vite you need to enable additional flags. See: https://stenciljs.com/docs/config-extras#enableimportinjection

import { Config } from '@stencil/core';

export const config: Config = {
  namespace: 'test-compo',
  extras: {
    enableImportInjection: true,
  },
  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: '../loader',
    },
    {
      type: 'dist-custom-elements',
    },
    {
      type: 'docs-readme',
    },
    {
      type: 'www',
      serviceWorker: null, // disable service workers
    },
  ],
  testing: {
    browserHeadless: "new",
  },
};

As of today, with Angular 17.0.5 and Stencil 4.8.1, this does not seem to be working anymore. Disabling the cache in angular.json does work as a workaround:

"cli": { "cache": { "enabled": false} },

[angular-automatic-lock-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.}