bug: Unable to run Angular test app outside monorepo and import Stencil component successfully

[withinsight]

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.7.0

Current Behavior

Following the guide at: https://stenciljs.com/docs/angular, I've got a monorepo with one package for Stencil, another for the Angular target. I'm using the dist output with an Angular outputType of component.

I have everything working in the repo. I'm able to import and run the test app successfully. The import is using the library name (per Angular docs):

import { ComponentModule } from 'components';

When I build an Angular workspace, library and test app external to the monorepo, this is when I receive the error. Note that I'm using npm link to achieve package imports as everything is currently local (I also used npm link to import the Stencil package in the Angular package in the monorepo).

When I import the module the same way:

import { ComponentModule } from '@package/component-name/dist/components';

(have to point to /dist/components because npm link points you to the root directory of the package).

Running ng serve is successful, however this is the browser error:

Expected Behavior

The Stencil component wrapped in Angular should import and display the same in an external test Angular app as it does in the test Angular app located in the monorepo.

System Info

System: node 16.10.0
    Platform: darwin (23.3.0)
   CPU Model: Apple M3 (8 cpus)
    Compiler: /node_modules/@stencil/core/compiler/stencil.js
       Build: 1710170895
     Stencil: 4.12.6 🍍
  TypeScript: 5.3.3
      Rollup: 2.56.3
      Parse5: 7.1.2
      jQuery: 4.0.0-pre
      Terser: 5.29.1

Steps to Reproduce

#1 Follow the instructions at https://stenciljs.com/docs/angular, note the component works in the test app.

#2 Create a new Angular workspace & test app in a new location on your machine. Symlink to the Angular target package from the new Angular test app. Run the Angular test app in browser.

Code Reproduction URL

Repo for #1 above: https://github.com/withinsight/stencil-angular-output
Repo for #2 above: https://github.com/withinsight/stencil-angular-output-external-consumer

Additional Information

Angular: 14.2
Node: 16.10

[withinsight]

This is a bump on #3362, which apparently still exists.

[withinsight]

I can see when comparing a test-app running in the monorepo (which runs successfully) a difference with running a test-app outside the monorepo (which fails):

The call stack is pointing to line 10910 in Angular core, which if you pause 3 lines before and see what lView is, its null in the failing version and an array with a whole bunch of view data in the functioning version:

The call right before this comes from the generated Stencil components.ts file, where the MyComponent class starts.

[christian-bromann]

@withinsight I am having a hard time getting to a reproducible state. After checking out withinsight/stencil-angular-output-external-consumer I can't build the project because <my-component /> is unknown. I can't really find any references to it. Can you do me a favor and provide a description how I can get to the place where you are at? I probably missing something here.

[withinsight]

@christian-bromann You have to link packages using npm link. So first,

in stencil-angular-output/packages/angular-workspace run npm link and then,
in stencil-angular-output-external-consumer run npm link angular-workspace

The former makes angular-workspace available locally on your machine as a global npm package (you can see it by running npm list -g), and then you establish a link to it with the latter. In VS Code, when you run the above, the red line indicating a missing package on line 3 of this file will go away.

This is described in the Stencil Angular docs but I guess I didn't describe it here, but this is essentially how you "mock" import packages before they're actually available on npm, or can test package changes locally before publishing them in your actual package.

[withinsight]

Today's update: it appears that once the package from stencil-angular-output is actually available from a registry as an official package, and you can install it from stencil-angular-output-external-consumer as one, and avoid npm link altogether, this error message goes away.

The Stencil Angular docs really should mention this, and I may take Ryan's advice from Discord to update the docs to talk a little about packages and maybe have others who are attempting to do what I'm doing avoid losing a week's work to npm doldrums.

[withinsight]

My guess is that when you npm link to a local package, and that package depends on other things down the dependency chain, those things further down the chain aren't resolved properly.

[christian-bromann]

I was able to build the project after:

• going to cd packages/stencil-library and run npm install and npm run build, then link the project via npm link
• then going back into the Angular project: cd packages/angular-workspace and install the stencil library via npm link stencil-library - then project can be build via npx ng build component-library

After going back to the stencil-angular-output-external-consumer project, I am also successfully able to build the project:

Can you please help me understand if I do something wrong here?

[withinsight]

@christian-bromann Great, glad you were able to get this far. So in stencil-angular-output-external-consumer, when you run npm run start, are you able to see error NG0203 in the console?

It would be good if you are able to confirm the above, however, it goes away when I import stencil-angular-output coming from an actual package repository, so anything further you find would help for when we update the docs.

[christian-bromann]

are you able to see error NG0203 in the console?

No, I get:

❯ npm start

> stencil-angular-output-external-consumer@0.0.0 start
> ng serve

✔ Browser application bundle generation complete.

Initial Chunk Files                                                               | Names             |  Raw Size
vendor.js                                                                         | vendor            |   2.99 MB |
polyfills.js                                                                      | polyfills         | 316.45 kB |
styles.css, styles.js                                                             | styles            | 208.88 kB |
main.js                                                                           | main              | 125.11 kB |
runtime.js                                                                        | runtime           |  14.12 kB |

                                                                                  | Initial Total     |   3.63 MB

Lazy Chunk Files                                                                  | Names             |  Raw Size
polyfills-core-js.js                                                              | polyfills-core-js | 152.27 kB |
polyfills-dom.js                                                                  | polyfills-dom     |  26.69 kB |
stencil-angular-output_packages_stencil-library_dist_esm_my-component_entry_js.js | -                 |   1.71 kB |

Build at: 2024-03-19T23:01:50.447Z - Hash: 9efc2357c8afd787 - Time: 4386ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✔ Compiled successfully.

Are you on Windows maybe?

[withinsight]

Have you opened the browser? Looks like you're only on the command line. This error is in the browser JS console.

[christian-bromann]

Have you opened the browser?

Ups, yes, looking into the browser console revealed the error. I will ingest this into our backlog for the team to take a look at.

[Loic57]

Same issue here but not in the monorepo structure.

In angular 17.3.8 with standalone components, impossible to use the web components. I have the same NG0203 error

[brayansi]

am facing the same issue in projects that use standalone: true. (ANGULAR V18)

In projects with modules, it works perfectly. (ANGULAR V16)

Any temporary solution to resolve this error?

[Samg983]

For me it's solved when you call the defineCustomElements function in your main.ts file. The defineCustomElements function is coming from your core library. This is also a monorepo setup, based upon the boilerplate: https://github.com/stencil-community/designsystem-boilerplate/tree/main