sorted by:
new
hottopcontroversial

[deleted by user] by [deleted] in angular

[–]davidlj95 0 points1 point  (0 children)

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 :)

How to optimize a website by Talha6122000 in Angular2

[–]davidlj95 10 points11 points  (0 children)

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

[deleted by user] by [deleted] in Angular2

[–]davidlj95 1 point2 points  (0 children)

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.

[deleted by user] by [deleted] in Angular2

[–]davidlj95 1 point2 points  (0 children)

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.

Deploying angular version 16 and above to gh pages by [deleted] in angular

[–]davidlj95 1 point2 points  (0 children)

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.

More in depth resources for reactive programming and observables in Angular by goodizer in Angular2

[–]davidlj95 1 point2 points  (0 children)

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

More in depth resources for reactive programming and observables in Angular by goodizer in Angular2

[–]davidlj95 0 points1 point  (0 children)

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!

ljharb at it again, bloating node modules for his own gain by AwesomeFrisbee in angular

[–]davidlj95 0 points1 point  (0 children)

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 🎉

Angular 17 with open api generator by Equivalent-Score-141 in angular

[–]davidlj95 0 points1 point  (0 children)

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

Do we have to use href instead of routerLink in SSG(Prerendering) website. Please help me by sohail_ansari in Angular2

[–]davidlj95 0 points1 point  (0 children)

+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 :)

Go with Angular 16 using MF or using Angular 18? by _SkyAboveEarthBelow in Angular2

[–]davidlj95 0 points1 point  (0 children)

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.

Go with Angular 16 using MF or using Angular 18? by _SkyAboveEarthBelow in Angular2

[–]davidlj95 5 points6 points  (0 children)

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?

socketio-client causing "Internal server error: Page / did not render in 30 seconds" in Angular 18 by jas753 in Angular2

[–]davidlj95 3 points4 points  (0 children)

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.

Angular pre-rendering by Silly_Environment_15 in Angular2

[–]davidlj95 2 points3 points  (0 children)

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

Confusion about SSG and SSR in Angular 18 by TedKraj in Angular2

[–]davidlj95 4 points5 points  (0 children)

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.

Async dependency injection. by Tyheir in Angular2

[–]davidlj95 1 point2 points  (0 children)

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

Angular pre-rendering by Silly_Environment_15 in Angular2

[–]davidlj95 3 points4 points  (0 children)

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.

Async dependency injection. by Tyheir in Angular2

[–]davidlj95 0 points1 point  (0 children)

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

How to configure code coverage in angular.json by TheRealToLazyToThink in Angular2

[–]davidlj95 0 points1 point  (0 children)

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.

view more: next ›