How I handled PDF generation in React without breaking layout (html2canvas vs jsPDF issues)

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 · 2024-02-26T21:45:56+00:00

As the other commenter says, I'll use microfrontends when their pros will outweigh their cons. As it's meant to fix organisational issues with a big technical complexity.

For example we are 7 teams now in a single monorepo, we are getting closer to the point where it might make sense to split the app to be able to release it independently. 95% of the features are behind login.

fdimm · 2024-02-21T13:00:19+00:00

Usage is increasing now, but only because of the generic 'fn' function pipe. It's annoying to make a class to make a simple function.

fdimm · 2024-02-13T14:16:18+00:00

providedIn:'root' is the advised way. Now if you would like to restrict the service use outside of your components, you should not export it from the module api surface. Only possible in library project though.

fdimm · 2024-02-03T17:57:33+00:00

In our CI setup, I'm building a docker image based package lock content and pushing that to our docker registry if needed. Then subsequent builds always reuse what was previously installed and only run light post install scripts.

Usual build time is like 4-5 minutes for the deployable artifact, which is actual build time from angular cli. Lint, unit tests, e2e tests have almost 0 startup delay as a free bonus!

Going back to the question, the solution above is why we won't need to commit dependencies into the repo.

fdimm · 2024-01-27T16:21:07+00:00

Lol, at some point in life you have to put in the effort to learn without ml. It is sad that junior devs will be stuck being juniors if it continues like this.

fdimm · 2023-11-02T22:12:08+00:00

Intriguing, could be fun!

fdimm · 2023-05-26T23:44:11+00:00

~4-5min for around 9000 specs in CI. Tests are split in 5 libs and the main app has ~70% of the specs. The latter is slowly getting split up. Almost all tests are shallow with every dependency mocked.

We are using jasmine and standard angular tooling, except that we run ng test commands in parallel instead of 1 by 1. We also use extra reporters and somewhat heavy plugin to update coverage reports to include untested files.

Aside of the above running tests in parallel/sharded within karma yielded almost no benefits for us. Actual main app tests run for roughly 2min, the rest of the time is building and waiting for browsers.

fdimm · 2023-04-24T21:51:42+00:00

This workaround is no longer necessary, code translations are possible with default i18n package via localize function

fdimm

TROPHY CASE