bug: Import errors in angular component.ts

[kartikwatwani]

Prerequisites

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

Stencil Version

4.21.0

Current Behavior

I started with Stencil yesterday. Went through the documentation to integrate angular but I am unable to import the web components generated via stencil in component.ts of angular-workspace/projects/(some-more-paths)/stencil-generated/component.ts, therefore I am unable to run npm run build in angular-workspace. It was mentioned in Angular Integration documentation that we don't need to use npm link if we are using lerna monorepo but I still tried it because it was giving errors. But still no help. I tried adding paths in tsconfig.json but still no help. So, I felt maybe something with IDE so I tried it on IDX but still errors were present. I then checked with public stencil projects like revogrid and that was also configured like mine so I am not able to find what is causing this. My repo is available here.

Expected Behavior

I should be able to run npm run build in angular-workspace without import errors in stencil-generated/component.ts.

System Info

System: node 20.10.0
    Platform: darwin (24.1.0)
   CPU Model: Apple M1 (8 cpus)
    Compiler: /Users/kartikwatwani/projects/inner_growth/node_modules/@stencil/core/compiler/stencil.js
       Build: 1724698030
     Stencil: 4.21.0 🐷
  TypeScript: 5.5.3
      Rollup: 2.56.3
      Parse5: 7.1.2
      jQuery: 4.0.0-pre
      Terser: 5.31.1

Steps to Reproduce

I have reproduced in my repo.

Code Reproduction URL

https://github.com/kartikwatwani/inner-growth

Additional Information

No response

[tanner-reits]

@kartikwatwani Thanks for reporting! I transferred this issue to our framework output targets repo as it's an issue with our Angular output target, but did confirm something is not quite right here!

As a temporary workaround, you can apply
this patch which eliminates the build errors. In there, I also changed the customElementsExportBehavior for the dist-custom-elements output target as that needs to be set to a specific value when using the standalone option (docs here).

[kartikwatwani]

Thanks, the patch worked. But will single-export-module export behavior result in whole module being loaded when I import even one component in my angular app?

[kartikwatwani]

If someone wants a stencil starter with angular included by default, they can give try this repo which includes a way to rename the library name and set origin using gulp task.

[kartikwatwani]

I have realized 'auto-define-custom-elements' works for outputTarget:'dist-custom-elements', if we provide exports in package.json of stencil core components in the below fashion i.e. for each of the component below it is "my-component" we wish to export from the library we need to specify it in exports along with ".","loader","./standalone". Can we do something so that this exports for each component is not required in package.json?

  "exports": {
    ".": {
      "import": "./dist/index.js",
      "require": "./dist/index.cjs.js",
      "types": "./dist/types/index.d.ts"
    },
    "./standalone": {
      "import": "./dist/index.js",
      "types": "./dist/types/index.d.ts"
    },
    "./standalone/my-component.js": {
      "import": "./standalone/my-component.js",
      "types": "./standalone/my-component.d.ts"
    },
    "./loader": {
      "import": "./loader/index.js",
      "require": "./loader/index.cjs",
      "types": "./loader/index.d.ts"
    }
  },