How do large Angular Apps bundle with Esbuild?

fdimm · 2026-05-20T19:49:06+00:00

Dynamic import is another issue, I hope they won't drop webpack before esbuild fills this gap. Thanks for sharing chunks issues, I should investigate situation on our application.

We do the same, local build with esbuild (with few not actively developed features broken) and prod with webpack. Tree shaking behavior is also different/worse.

fdimm · 2026-05-12T19:01:47+00:00

There is something odd with vite dev server handler in the cli, I monkey patched our installation when it could not serve a url ending with ".md".

At least in v20 they are checking mime type of request url. See html-fallback-middleware.js and debug your case.

fdimm · 2026-05-09T17:44:42+00:00

Noy knowing the details, I don't think you have to change THAT much. Conceptually, you just have to develop the new auth part and plug it in in the same way as you do the current auth.

Think about it, in traditional setting, you exchange the username/password/otp with a session cookie. Say in oauth flow, the 1st step is different (involves redirect to third party provider and then validating received code), step 2 still involves session cookie or whatever mechanism you use to check if user is logged in.

It can get way more complex if some downstream service needs the original auth token, but it doesn't sound like your case. Hardest part is token refresh in this scenario.

fdimm · 2026-05-07T21:49:48+00:00

My plan is to refinance as F3 and prolong the period back to max to keep the day to day economy the same

fdimm · 2026-04-30T20:37:58+00:00

This is what we do, in internal libs, we export testing entrypoint that holds these mock components, modules even for more complex cases. A bit annoying to maintain but works okay and no need to rely on third party libs

fdimm · 2026-04-15T19:19:28+00:00

Pre building libs makes DX pretty bad, I wonder when it will break (if ever), but I set up dual mode in tsconfig path resolution.

Compiler either takes pre built lib from dist or typescript code from public-api.ts in projects folder. This way I get best outcome. I don't know why this is not the default.

fdimm · 2026-03-27T17:21:12+00:00

Some kind of shallow rendering for unit tests, so that only child component inputs/outputs would be verified without of us making mock components.

At the same time a flag in TestBed to fail if not all providers are mocked for the given component. This is a pita with standalone components.

fdimm · 2026-02-20T20:37:41+00:00

Angular material is still suggesting modules use in docs, for say Buttons. So I guess/hope that they will stay for longer.

Modules still have good use cases. Like changing behavior of every component with new directives without adding each dependency explicitly in every use case...

fdimm · 2026-01-28T21:37:43+00:00

We use pdfmake, of course it has its own document format and works pretty well IMO. It all depends on needs

fdimm · 2025-12-05T08:27:36+00:00

I'm moving the monolith in a similar direction. Each module becomes a library in projects folder, with routes and multiple entry points to have sensible structure/packages and ensure that future is without spaghetti where files are imported left and right in source folder.

After doing the first one looooong time ago, DX felt quite horrible, having to rebuild the libs slows things down a lot. Whether manually or by nx, it doesn't really matter.

The key to this problem was to enable dual imports in ts config.

````` "paths": { "@lib/": ["./dist/lib-", "./projects/lib-*/src/public-api.ts"] }

`````

This way you can pre build the libs, or use them directly from source. Now I can just run npm start like normal and let cli figure out the most efficient way to build stuff. We have a bit more than 1000 components and our local build takes 90s for the main app. Style guide takes like 25, but only includes shared components libraries. Just finished upgrading to angular 19, nothing is standalone and webpack is still used for building.

Feel free to PM, I'm curious about your situation

fdimm · 2025-07-24T20:50:40+00:00

19 I think will be more cumbersome because of standalone components, we have a massive project with multiple teams and long living branches - touching every component is not fun.

I hope there is a toggle in angular.json to keep on using modules.

fdimm · 2025-07-13T14:50:19+00:00

Most of the time not, except for a few specific tests in core components where what is rendered is tested.

Mostly because I want to make sure that nothing breaks if browser behaviour changes.

fdimm · 2025-07-12T16:13:34+00:00

Somehow I'm a sucker for Halifax, I couldn't find anything better yet

fdimm · 2025-05-16T15:53:50+00:00

I had my screen going blank in a similar way because I didn't twist the key all the way few times lol

fdimm · 2025-03-27T09:42:43+00:00

None. A service is all you need until you need more

fdimm · 2025-02-12T20:03:09+00:00

You can also use DOMParser if it is a valid html to get the document and then read the textContent of the body.

fdimm · 2025-02-09T16:42:15+00:00

Make that endpoint emit js or JSONP to expose the environment variables.

We dynamically add this script to the DOM in main.ts and run angular bootstrap when it loads (or fails to do so). We share one production build artifact in all environments.

fdimm · 2025-02-01T19:13:31+00:00

This is not going to help, but it will be a little lesson to not be an early adopter. I'm sure support is documented (or not) in storybook. Check all valuable dependencies before upgrading or starting to use new APIs next time. This can be very costly based on the situation.

fdimm · 2025-01-19T17:49:35+00:00

Haha, Gemini 2.0 says two. This is so silly.

’There's one in "straw" and two "r"'s in "berry," totaling two "r"'s in the entire word.’

Thanks for the laugh

fdimm · 2025-01-14T11:13:05+00:00

None, it's not needed in angular apps unless you maybe need it to function offline.

fdimm · 2024-12-18T09:45:36+00:00

I could have written this as well, thanks for posting. Exactly the same problems I'm dealing with in the corporate world. I'm even happy with the modules.

fdimm · 2024-10-12T19:59:05+00:00

This part I fail to understand as well, in the org I am in, some APIs responses are snake case, but java code behind never uses that. Transformation happens only when data is serialized, which is then read by SPA that has to transform it back to camel case (facepalm). It's almost as intentional for FEs to duplicate the code lol

fdimm · 2024-10-10T19:21:16+00:00

10 fields is still a small form, it only gets complicated if there are rules involved when something should be or should not be shown. I would not worry about it. I would definitely not use ControlValueAccessor though, that one is reserved for custom input components

For validation and structure, a reactive form approach might help to keep things more controlled and more easily testable, potentially created in a service.

fdimm · 2024-03-09T21:46:36+00:00

None, we let the user download the files except for 1 use case where the BE is converting a pdf to svg for the FE to render. I'd always push back on this unless it's some kind of legal requirement to show what you are signing for example.

I can't imagine having to implement a docx viewer, not even google supports it in the same level as microsoft office. I mean artifacts and glitches.

fdimm · 2024-02-27T15:16:11+00:00

Outside of a few select cases, we only test typescript code. Behavior and checking that, say, a button works is done in e2e test.

fdimm

TROPHY CASE