Describe how lazy loading should be used in other projects

[dimi-nk]

I've recently found out about stencil and want to use it in an angular[5] application. Being used to webpack pre-bundling, the concept of lazy loading didn't resonate with me. Not that I don't like it, just not sure how that'll work with a bundled application.

In the current ditribution docs, it simply says:

Put a script tag similar to this <script src='node_modules/my-name/dist/myname.js> in the head of your index.html

That is not true when bundling and deploying the application, since node_modules won't exist. What should really happen is 'copy' the dist folder of the stencil component to the dist folder of the app.

I think it'd worth explaining the concept of lazy loading a bit better and maybe provide better instruction for such a common use case.

---

For anyone interested, my angular5 solution is the following:

1. npm install (or npm link during development) the stencil components dependency
2. add something like the following to your .angular-cli.json, where my-name is the dependency's package.json name

{
  "apps": [{
    "assets": [
      { "glob": "**/*", "input": "../node_modules/my-name/dist", "output": "./components" }
    ]
  }]
}

3. add <script src='components/mycomponent.js'></script> to your index.html. The name of mycomponent.js comes from the actual setup of the stencil project.
4. use your components

<my-component first="Stencil" last="'Don't call me a framework' JS"></my-component>

*The names used above are exactly the same names used in stencil-component-starter

[jgw96]

Hey @dimi-nk , thanks for opening an issue with us. Have you seen these docs https://stenciljs.com/docs/angular-integration on how to use web components built with Stencil in an Angular project?

[jgw96]

Also @dimi-nk , for why we have lazy loading built in I would recommend checking out https://www.youtube.com/watch?v=7vUs5yOuv-o&t=1021s . Just to explain a little bit about how it works. The tiny 5kb Stencil loader file registers what components might be used in your browser when it is loaded. Then, when and only when, that element hits the dom it loads the actual implementation of the component and renders. This means that if you use a component in your app, but its a few pages deep in the app, the JS for that component will not be loaded until the user goes to that page. This means that for the first view of your app, only the JS needed for components on that first page will be loaded. Hope this explains thing (:

[dimi-nk]

@jgw96 as far as I can see, @kensodemann did the commit right after I posted this question. Either it was a diabolical coincidence or he used my solution for the guide (they do look quite similar). Either way it's fine, but on the time when I asked this question there was nothing on the guide. I had a chat on the slack channel about this and finally understood it. The issue was more so that others don't get the same question as I did ;)

[dimi-nk]

BTW, when visiting the site again, I couldn't see the angular-integration section (even though it worked on the direct link posted before). I had to clear clear my cache to see it. Maybe check your cache busting strategy.

[jgw96]

@dimi-nk Sorry about that, didn't realize the timing on this issue. That doc was actually up before but was called something different. Ill check the cache strategy. Thanks for using Stencil!