web VS angular-builders

i have around 5+ years of experience in web development. starting from angular js 1 to react-native, react & along with typescript. Well aware of most of the modern web tools, esbuild, react-query, swc, rollup, vite, https://modern-web.dev/, testing-library , etc..

In a future release, Angular will replace Karma with the web-test-runner from ModernWeb. That future release might already be Angular 17. ModernWeb is a modern community project that embeds tests into a browser.

So, you write web components and you're interested in expanding the work you put into unit testing them? Well, you've come to the right place. This is just the beginning, but Testing Web Components: the Series is going to lay out for you how Open Web Components and Modern Web help you to do just that. We'll start with how the Open Web Components generator can get you up and running in no time with @web/test/runner right out of the box.

Rocket is an SSG that allows seamless integration of Markdown and WebComponents. There is a project to support the development of web standard technologies called Modern Web, and rocket is a subproject of that project. Other sub-projects are test runner and development server, modern-web for development server, and open-wc for WebComponents development, testing, and linter.

Just setting up a front end dev environment is a lesson in complexity theory

FWIW, because I've been out of web dev for a while and may need to get back into it, I came across this site today:

https://modern-web.dev/

I followed their example ts+preact+esbuild setup and was very pleasantly surprised by the ergonomics.

I was expecting way worse.

astro modern-web

web-test-runner

You can check out his repo at: https://github.com/just-jeb/angular-builders

How does it work in Jest? The secret sauce is the jest-angular-preset project. It holds all the logic, and the Nx and just-jeb/angular-builders depend on it.

I already did it using Angular custom webpack and a custom build script I included in my angular.json file. You can just read the system env variables from the parameters provided by webpack and insert them using the webpack.DefinePlugin().

You would need a custom webpack config using asset modules to do this.

I think most people use this plugin if they want to customize the webpack config: https://github.com/just-jeb/angular-builders/tree/master/packages/custom-webpack

I use a custom webpack builder for this. There's a bit of pre-req setup to do in your angular.json, but after that you can run your own webpack script for any of your build configurations.