ionic-team
BUG: `loader` required for integration with Angular not output from `stencil build --dev`
Stencil version:
@stencil/[email protected]
I'm submitting a:
[x] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/
Current behavior:
When integrating a component-module built with Stencil into an Angular app, as specified in the documentation, the Angular app cannot be built when the Stencil module has been built in dev-mode (stencil build --dev).
The error is caused by Stencil not outputting anything to dist/loader/ when builing in dev-mode. Here is the error message from Angular:
ERROR in src/main.ts:16:38 - error TS2307: Cannot find module '@limetech/lime-elements/dist/loader'.
16 import { defineCustomElements } from '@limetech/lime-elements/dist/loader';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Expected behavior:
Stencil should output the appropriate files in dist/loader/ when run with the --dev cli parameter, just as it does when run without it.
Steps to reproduce:
This can be reproduced by following the documentation for starting a new project, choosing the component starter. Then run npm install and then npm start.
The component starter is configured to output the loader folder next to the dist folder, rather than inside it. But no such folder is created. When npm run build is run, the folder is output correctly.
Because the loader folder is configured to be placed outside the dist folder in the current component starter, the folder will remain once npm run build has been run, but it will not be updated by npm start. If running an older project that has been updated to Stencil 1.9.0, but still has the loader folder placed inside the dist folder (which is still the default if no config for esmLoaderPath is set, running npm start will actually remove the loader folder.
Related code:
// insert any relevant code here
Other information:
For the time being, we will work around this by adding a separate watch script without the --dev parameter, for when we need to develop against the consuming Angular app.
Our Stencil project is located at https://github.com/Lundalogik/lime-elements
This problem is back again in v1.12.5. I'm not sure exactly what version it returned in, but I'll see if I can find out and come back.
Can confirm for v1.16.5; I just got the same issue with Next.js. Running their "with-stencil" example fails in dev mode:
- clone https://github.com/vercel/next.js/tree/canary/examples/with-stencil
- install dependencies
- run
yarn devin both directories
Unless stencil has been built in production mode, this will throw an exception.
The problem still exists for @stencil/core 2.4.0
UPDATE: As workaround I found that with option buildEs5: true stencil build everything in --dev mode as expected
Hey all!
Sorry it took so long to hear from the team here. I just took a look at this and can verify this is still an issue in the latest version of Stencil (v3.0.0 at the time of this). So, I'll get this labeled and ingested into our backlog for future work
Thanks again for logging this!
