Guides
Angular
Angular's dev server is not configurable, so quello runs beside it.
Angular's builder does not expose a place to add a plugin, so quello runs as a separate process
next to ng serve and the page points at it.
Install
Terminal
pnpm add -D quello-cli concurrently
Configure
package.json
{
"scripts": {
"dev": "concurrently -r \"quello .\" \"ng serve\""
}
}
src/index.html
<body>
<app-root></app-root>
<!-- development only: remove this tag for a production build -->
<script defer src="http://127.0.0.1:5100/__quello/client.js"
data-quello-endpoint="http://127.0.0.1:5100/__quello/picks"></script>
</body>
ng serve stays on its usual port; quello listens on 5100 and answers cross-origin, which is why
the endpoint is spelled out in full.
What a pick will know
The component name, read from Angular's Ivy debug API (window.ng), which is present in a
development build:
{ "framework": { "framework": "angular", "component": "GalleryPageComponent" } }
It resolves per element rather than per route — a nav in your layout reports AppComponent even
while a page component is open. Angular exposes no source location, but the class name finds the
file in one step.
The script tag lives in
index.html, which is also used for production builds. Remove it before
shipping, or inject it only in your development configuration via fileReplacements.