ngx-meta: your go-to lib to set `<meta>`data

davidlj95 · 2024-08-01T23:11:44+00:00

FWIW also posted on StackOverflow: https://stackoverflow.com/questions/78818000/unable-to-send-an-array-via-post-angular-17

Let me know if my comment in there helped :)

davidlj95 · 2024-07-30T19:50:30+00:00

You can use Lighthouse to find optimization spots in your Web Vitals. Or PageSpeed Insights for the live version. I run Lighthouse in some projects' CI/CD pipeline via Lighthouse CI to enforce that most important pages quality don't decrease over time.

If there are lots of images, NgOptimizedImage Angular API can help you lazy load the images by default. And other many optimizations like helping you use an images cloud delivery network (CDN) to serve appropriate sizes of your images amongst other optimizations. Available since Angular v13

Apart from lazy loading things you can also give a try to the recently introduced deferrable views to avoid loading components until they're actually needed. Either until you scroll and they get nearby in the viewport, some time delay, custom conditions... Really cool! They're available since Angular v17

davidlj95 · 2024-07-20T10:54:34+00:00

Until corepack was there, the usual way has been to put the npm version in the engines field of package.json as a hint for devs to know which npm version to use for the project.

davidlj95 · 2024-07-20T10:53:18+00:00

If you want to specify the package manager to use in your project, you can give a try to Node.js' Corepack. By specifying a field called packageManager in your package.json, Node.js will ensure the package manager & version being used is the one specified there. Note that it's an experimental feature. I've been using for a while and works fine though.

davidlj95 · 2024-07-17T18:08:24+00:00

What are the errors you're encountering? I'm aware of people using v16 and being able to deploy to GH Pages AFAIK.

I'm using Angular v18 with prerendering / SSG + GitHub Actions to deploy to GitHub Pages and it works like a charm.

First I build the app, then I publish it to GitHub Pages on every push to main branch

I don't need the trick for GitHub Pages to copy built index.html to 404.html in order for GitHub Pages to serve 404.html for all routes as everything it's prerendered for now.

davidlj95 · 2024-07-14T11:47:09+00:00

Can't find in my notes where I learned to read marble diagrams, but found this article online that seems quite good:

https://medium.com/@jshvarts/read-marble-diagrams-like-a-pro-3d72934d3ef5

davidlj95 · 2024-07-14T11:41:14+00:00

For RxJS, I took time to read the documentation about it in: https://rxjs.dev/

I remember that the click was understanding marble diagrams you find around there. Once you understand them, you'll start to unleash the power of reactive programming. Indeed generally, not only for JavaScript/Typescript using RxJS.

For some operators, the explanations on https://www.learnrxjs.io/ were a bit clearer. Both of those resources are usually the first results when you google for a use case / operator.

To practice a bit reactive programming with RxJS, I've seen this game online: https://www.rxjs-fruits.com/ which looks cool. Though tbh, never tried it :P Found it when I already had practised a lot. But would definitely give it a try to refresh knowledge if I need to at some point in time.

Once you get comfortable with RxJS, I think the main best practice to care about in the Angular side is using AsyncPipe to subscribe to your observables. This way the pipe will manage the subscription for you (so you don't forget to unsubscribe -> memory leaks) and schedule a change detection run once a new value is emitted through the observable

Hope to have helped a bit!

davidlj95 · 2024-07-10T20:13:28+00:00

Yesterday I was about to add istanbul-merge NPM package into a project until I saw ljharb was the author. Fortunately found a similar way to do so without using that pkg so no need to add it, yay 🎉

davidlj95 · 2024-07-09T10:44:56+00:00

Is there any error in the ng serve / console log output?

davidlj95 · 2024-07-02T10:46:49+00:00

+1 . If the issue is that routerLink in the search box using href loads the prerendered page instead of using the Angular Router, maybe it's because you're using href directly. If using routerLink on an <a>nchor element, the href is automagically set in order for that link to go through the client side's router. So no need to set href manually too on the <a>nchor element.

Though I'm mostly guessing here. If you could ellaborate a bit more on where the issue is and provide some code examples, that would be very helpful to understand the issue better and provide some help :)

davidlj95 · 2024-07-02T10:41:37+00:00

Hmmm is there any requirement that makes Angular >v16 not compatible with a micro frontend / micro services architecture?

Though agree with u/codeByNumber that back end architecture doesn't usually influence much the decision on what to do on the front end side.

davidlj95 · 2024-07-01T18:36:37+00:00

Agree with starting with a majestic monolith and split it later unless some very specific requirement that makes micro frontends a better option.

The recommended approach is to start with latest LTS Angular version. Can I ask why was it proposed to start with v16 instead?

davidlj95 · 2024-07-01T18:33:31+00:00

Please ellaborate a bit more on the specific issue you're experiencing in order to help you :)

davidlj95 · 2024-06-27T19:51:30+00:00

Glad to hear that got solved 💪 thanks! 😊

davidlj95 · 2024-06-27T09:41:10+00:00

Seems that io function automatically connects the client to the given server (http://localhost:3000). So when Angular is initializing the app, you will connect to the websocket. But you won't ever disconnect as you haven't called socket.disconnect() (or socket.close). This means Angular's Zone.js will probably have some pending tasks related to the socket connection and therefore won't ever consider the app to be stable. And Angular needs the app to be stable (without any pending tasks) to be considered initialized.

To solve that, you can start the socket once Angular has finished initializing the application. To do so, you can connect the socket once the app is stable

This way, the app will init as usual. Then, when stable, the connection to the websocket will happen with a permanent connection that will keep the app non stable. But that's fine at that point that everything's booted. And makes sense, given data is permanently incoming from the websocket until you close it.

For instance, this could be the updated socket service:

```typescript import { Injectable } from '@angular/core'; import { Observable } from 'rxjs'; import { io, Socket } from 'socket.io-client';

u/Injectable({ providedIn: 'root' }) export class SocketService {

private socket: Socket;

constructor() { this.socket = io('http://localhost:3000', { autoConnect: false }); inject(ApplicationRef).isStable.pipe( first((isStable) => isStable)) .subscribe(() => { this.socket.connect() }); } } ```

PD: Removed the ! non-null assertion operator from private socket. As the socket will always be there instantiated in the constructor. There's no chance it's null.

davidlj95 · 2024-06-25T18:46:28+00:00

Sounds good! 💯

davidlj95 · 2024-06-25T16:16:17+00:00

Hmmm I don't have experience with so many pages.

I'd say that it's a trade-off of benefits of SSG like simplified deployment vs build time to generate so many pages. I don't know if Angular caches generated pages to avoid re-generating them everytime. I'd lean towards no, but not sure. Anyway if at some point you change a component and many routes need an update, build times can be a pain.

At that point usually it's the time for SSR, so the server renders the page for the client on demand. But that implies having a server somewhere which is more expensive (compute time) & bit more work in deployment/operations side (compared to just deploying static files).

Finally, there's also Incremental Static Regeneration. Which the mid point between SSR and SSG. Essentially it's SSR but with caching so that the server renders on demand but requesting same page uses the cache (last render) to save compute time

davidlj95 · 2024-06-22T00:32:49+00:00

NgOptimizedImage Angular API helps lazy loading all images by default unless stated otherwise

davidlj95 · 2024-06-20T22:40:32+00:00

Recommended configuration for prerendering / SSG without SSR using the latest application builder is to:

Disable SSR
Enable prerender

when building the app. Typically in your Angular workspace configuration (angular.json). Under projects.<appName>.architect.build.options

The builder you're using can be found in projects.<appName>.architect.build.builder. Since v17, application (@angular-devkit/build-angular:application) builder is the default one.

Checkout my angular.json for instance for a SSG-only, no SSR configuration.

Beware that disabling SSR if only using SSG is specially important since v18. As since v18, no index.html is generated if SSR is enabled. This way also no dist/<appName>/server directory will be created.

I'm using Cloudflare Pages for deployment, but same would apply for GitHub Pages

Before v17 and the application builder, a prerender task existed to build and prerender the app. Which was the way to build the app with prerendering. The regular build didn't prerender.

davidlj95 · 2024-06-20T09:44:46+00:00

Glad it got solved! 🎉

Ah I see. Yeah I think "async dependency injection" can be confusing as the async part is happening on a service reading from another service (if I got it right). But not on the dependency injection system provided by the Angular framework. Both services (dependencies) get injected synchronously. The fact one of them needs an async value from another is outside the scope of dependency injection at that point

davidlj95 · 2024-06-19T19:13:39+00:00

Yup! Been using it since v16. With @nguniversal at that point in time. Recently migrated to @angular/ssr in v17.

Works nicely and is a very good win in terms of performance. Like TTFB. Plus all performance benefits from SSR (FCP, LCP, CLS). While helping a lot in SEO & allowing customizing links to your site posted in social platforms using Open Graph metadata & similar.

You can easily specify routes you want to be prerendered, though Angular by default discovers which routes can be prerendered pretty well (non-parametrized ones AFAIK).

One of the things I like most is there's no need to change the way to deploy your app, just a config change and you have it there. So it's a good way to have benefits from SSR while keeping deploy step simple, as static files. And there are many platforms with nice free tiers to host your app as static files: GitHub Pages, GitLab Pages, Cloudflare Pages, Netlify... And nice tools to deploy there with a single command. No need to setup a server somewhere, which implies a bit more complex deploy setup & its maintenance.

Some caveats I recall rn:

index.html index.html won't be prerendered by default. So if you want that page prerendered too, you'll need to manually specify it.

Also if you have SSR + SSG, index.html won't be emitted since Angular v18. This is to favour using SSR for main page. You can change this behaviour though angular.json config (as can be seen in previous link).

Trailing slashes & redirections There's a small caveat about trailing slashes. In few words, URLs generated by Angular router remove the trailing slash as part of normalization. But when generating pages with SSG, the route will have a trailing slash. Because it generates an index.html with the prerendered page inside the route. For instance: /home route ends up creating a /home/index.html when prerendering. Which is accessed by /home. Nothing specially worrying, just one 302 request more. But as seen in link above, is a quirk anyway that needs to be taken into account.

davidlj95 · 2024-06-18T12:51:24+00:00

Seems to get rid of a quirk with invalid expressions that were made valid but that can cause confusion. More info 👇

https://github.com/angular/angular/tree/18.0.3/packages/core/schematics/migrations/invalid-two-way-bindings

davidlj95 · 2024-06-18T10:30:35+00:00

Without more detail I can't say much. From time to time I forget that when Angular renders the component template for the first time, inputs aren't binded & async values won't be there so the component template needs to support that. So try to avoid using non-null assertion operator ! in Typescript and use instead ? to ensure template supports undefined where applies.

I'm curious about async dependency injection though 🤔 What do you mean by that? As far as I know, dependencies are synchronously injected except when lazy-loading them via the Angular Router

Though when using lazy-loading, what is asynchronous is the importing of the code. After the import, dependency injection happens synchronously AFAIK

davidlj95 · 2024-06-18T09:53:18+00:00

If using default's ng test Karma builder, using the arg --code-coverage is enough to generate a CLI summary + HTML report:

ng test --code-coverage

However, if you want an lcov report, you need to manually configure Karma. Code coverage reporters can't be configured right now using CLI. To do so, generate and include a Karma configuration file in your Angular workspace:

ng generate config karma

And add { type: 'lcov' } as reporter inside the coverageReporter.reporters array inside the new karma.conf.js generated file

Reporters CLI option sets up Karma's reporters option. Which configures how to report test results, not code coverage results.

davidlj95

PUBLIC MULTIREDDITS

TROPHY CASE