AnalogJS 2.0 arrive en force !

AnalogJS sort enfin en version 2.0 ! Ce méta-framework pour Angular continue de révolutionner l’écosystème avec des fonctionnalités qui vont vous faire gagner du temps.

🎯 Qu’est-ce qu’AnalogJS ?

AnalogJS est le méta-framework pour Angular construit sur Vite et Nitro. Il apporte ce qu’Angular n’a jamais eu nativement : du routing basé sur le système de fichiers, le support des pages markdown, des routes API et le rendu hybride SSR/SSG.

Pensez à Next.js pour React, mais pour Angular !

📜 Content Resources : les signaux rencontrent le contenu

La nouveauté star de cette version 2.0, ce sont les Content Resources. Avec l’évolution d’Angular vers les Resources, Analog suit le mouvement et propose des outils dédiés au contenu.

Lister les contenus

import { Component } from '@angular/core';
import { contentFilesResource } from '@analogjs/content/resources';
 
@Component({
  selector: 'blog-posts',
  imports: [PostsComponent],
  template: `
    @defer (hydrate on hover) {
      <posts [posts]="postsResource.value()"></posts>
    }
  `,
})
export default class Blog {
  readonly postsResource = contentFilesResource<Post>();
}

Afficher un contenu spécifique

@Component({
  selector: 'pokemon-detail',
  imports: [MarkdownComponent],
  template: `
    @let post = postResource.value();
 
    @if (post) {
      <article>
        <h2>{{ post.attributes.name }}</h2>
        <analog-markdown [content]="post.content"></analog-markdown>
      </article>
    }
  `,
})
export default class PostDetail {
  readonly postResource = contentFileResource<Post>();
}

Les Resources étant encore expérimentales dans Angular, attendez-vous à des évolutions futures !

📦 Optimisations : moins c’est mieux

Analog 2.0 fait un régime strict qui profite à tout le monde :

• Empreinte d’installation réduite : fini les dépendances Webpack inutiles
• Builders ESM : tous les Angular builders sont maintenant en ESM
• Dépendances allégées : tinyglobby remplace fast-glob pour du plus léger
• CLI direct : utilisez directement vite et vitest en plus de ng
• Bundle optimisé : plus de 100Ko économisés sur les projets full-stack

⚡️ Support des dernières versions

Analog continue de jouer dans la cour des grands avec le support :

🧪 Angular vs Analog pour Vitest

Angular 21 introduit le support natif de Vitest, mais Analog garde ses avantages :

Choisissez selon vos besoins : flexibilité avec Analog ou support officiel avec Angular.

Pour en savoir plus

• Annonce officielle AnalogJS 2.0
• Documentation AnalogJS
• GitHub AnalogJS
• Discord AnalogJS