@smallstack/ng-wc-serve

Serves all files (main, vendor, polyfill...) from the angular dev server endpoint as a single concatinated file via ngrok for angular web component testing purposes

Usage no npm install needed!

<script type="module">
  import smallstackNgWcServe from 'https://cdn.skypack.dev/@smallstack/ng-wc-serve';
</script>

README

Angular Web Component Serve CLI

At smallstack we develop web components and plug them into our backoffice applications. Instead of replicating our applications & microservices for local development, we want to reference our local web components online in our applications, hence this CLI.

How does it work?

An express server serves all angular files (runtime.js, polyfills.js, styles.js, scripts.js, vendor.js, main.js) as one concatinated file at http://localhost:4250/webcomponent. This endpoint now gets proxied via ngrok to a random ngrok address which can be used in our applications. Websockets are proxied as well, so live-mode is possible.

Installation

npm i -g @smallstack/ng-wc-serve

Have a look at the inline help: ng-wc-serve --help. Since version 1.1.x ngrok is disabled by default and has to be enabled via --ngrok

Endpoints

Guide

  1. To make the concatination process work, you need to run your angular dev server in production mode. At least you have to set optimization=true and sourceMap=false during the ngcc process, otherwise you'll run into js file parsing issues in your browser (Cannot parse <). We also need to disable the host check when ngrok is used, otherwise it won't work. Create a new script called start:wc in your angular project and add the following content: "ng serve --optimization=true --sourceMap=false [--disableHostCheck=true --no-live-reload]". Adjust the command as much as you want to, e.g. set a project or additional build parameters.
  2. Start the CLI (in any folder) via ng-wc-serve, you'll see something like this: Command Line Screenshot
  3. Follow the instructions and start the Angular Dev Server as described
  4. Now you can copy the ngrok address and get started

Debugging

Debugging your your web component can be hard since the code is minified. If you turn of angular's optimizations, this whole setup won't work anymore. Instead, you can turn off several build switches and still create a production bundle:

  • NG_BUILD_MANGLE=false
  • NG_BUILD_MINIFY=false
  • NG_BUILD_BEAUTIFY=false