Open withinsight opened 5 months ago
This is a bump on https://github.com/ionic-team/stencil/issues/3362, which apparently still exists.
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.
@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.
@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.
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.
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.
I was able to build the project after:
cd packages/stencil-library
and run npm install
and npm run build
, then link the project via npm link
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?
@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.
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?
Have you opened the browser? Looks like you're only on the command line. This error is in the browser JS console.
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.
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
Prerequisites
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 ofcomponent
.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 usednpm 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
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