explaingit

dipak-ahirav/ngarchitect

Analysis updated 2026-05-18

2TypeScriptAudience · developerComplexity · 2/5Setup · easy

TLDR

A browser-only Angular architecture review dashboard that analyzes a project ZIP and scores its maintainability, performance, scalability, and testability without sending code to any server.

Mindmap

mindmap
  root((NgArchitect))
    Scoring areas
      Maintainability
      Performance
      Scalability
      Testability
    Key checks
      Folder structure
      Subscription teardown
      Signals adoption
      Lazy routes
    Output
      Scored findings
      JSON export
      Report history
    Setup
      Upload project ZIP
      Browser-only
      Built-in demo
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Upload your Angular project as a ZIP and get a scored report on structure, code quality, and architecture problems.

USE CASE 2

Review specific rule violations like missing lazy-loaded routes or uncleaned subscriptions and get recommendations to fix them.

USE CASE 3

Track architecture improvements over time by comparing reports saved in browser history.

USE CASE 4

Try the built-in demo to see a realistic analysis before uploading your own Angular project.

What is it built with?

TypeScriptAngularTailwind CSSSignalsJSZip

How does it compare?

dipak-ahirav/ngarchitectarashthr/hugo-flowargeneau12e/kairos-tx
Stars222
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasymoderatehard
Complexity2/53/54/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

Requires Node 20 or newer, a built-in demo project lets you try the tool without uploading your own Angular code.

In plain English

NgArchitect is a tool for development teams who build applications using Angular, a framework for creating web applications. It helps those teams understand how well-structured their Angular codebase is before problems pile up. It works entirely inside the browser: you upload a ZIP file of your Angular project, and the tool analyzes it without sending any of your code to a server. The analysis produces a scored report across five areas: how easy the code is to maintain, how fast the application will perform, how well it can grow as the project expands, how easy it is to test, and how accessible the application is to people using assistive technology. The report includes findings sorted by severity, with filters to focus on specific categories. You can see which files are involved, read recommendations, and export the full report as a JSON file. The tool checks 20 specific patterns across 14 rule groups. Examples include whether components are organized into feature-focused folders, whether route loading is deferred until needed, whether the code avoids patterns that cause memory problems such as subscriptions that are never cleaned up, whether hardcoded secrets or development logging statements are present, and whether the codebase is adopting Angular's more modern signal-based approach. Score thresholds are stored locally in the browser so settings carry over between sessions. A built-in demo project is included so you can see a realistic analysis without uploading your own code. Past reports are also saved in browser storage so you can compare results across runs. The app is a client-side Angular application. Running it locally requires Node.js 20 or newer and takes two commands. It supports dark, light, and system color themes.

Copy-paste prompts

Prompt 1
NgArchitect flagged nested subscriptions as a high-severity issue in my Angular project. Show me how to refactor nested Observable subscriptions using modern Angular patterns.
Prompt 2
NgArchitect says my project has low signals adoption. How do I migrate an Angular component from @Input/@Output to signals?
Prompt 3
Walk me through running NgArchitect locally and analyzing my first Angular project ZIP from start to report.
Prompt 4
NgArchitect flagged excessive barrel exports. Explain what barrel files are and when they cause problems in large Angular apps.
Prompt 5
How does NgArchitect's lazy-loaded routes rule work? Show me how to add lazy loading to an existing Angular route configuration.

Frequently asked questions

What is ngarchitect?

A browser-only Angular architecture review dashboard that analyzes a project ZIP and scores its maintainability, performance, scalability, and testability without sending code to any server.

What language is ngarchitect written in?

Mainly TypeScript. The stack also includes TypeScript, Angular, Tailwind CSS.

How hard is ngarchitect to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is ngarchitect for?

Mainly developer.

Open on GitHub → Explain another repo

This repo across BitVibe Labs

Scan in gitsafehub Deploy in gitdeployhub dipak-ahirav on gitmyhub

Verify against the repo before relying on details.