ng-antd-admin is an Angular 22 admin template built around zoneless change detection

The stack table is the specification

This project describes itself as an enterprise admin front end solution built on Angular 22 and ng-zorro-antd 22, and the version table is where the reviewer should start. Angular is pinned at 22.2.0 with a fully standalone architecture, TypeScript at 6.0.2 with strict mode on, ng-zorro-antd at 22.1.2, RxJS at 7.8.0 and Less at 4.2.0 as the stylesheet preprocessor, with NestJS 10.x listed as an optional back end framework. The topic tags add the rest of the picture: drizzle-orm, jwt, mswjs, standalone-components and zoneless. Read together, they describe a template that follows the framework rather than lagging it, and that also owns a database layer, an authentication scheme and a mock server. That is a wide surface for a template, and it is the reason the repository splits into two top level directories, ui/ and nest-api/.

Zoneless change detection is the headline choice

The most consequential decision in the template is dropping zone.js. The configuration is a single provider:

// app.config.ts
export const appConfig: ApplicationConfig = {
  providers: [
    provideZonelessChangeDetection()
  ]
};

The README claims a change detection performance improvement of more than 30 percent from removing the zone.js dependency, which is a claim from the project rather than an independently measured figure. What matters for an adopter is the direction of travel: components must signal their own state changes, and code that relied on zone patching to trigger a check will not behave the same way. Combined with the standalone component style, where a component declares its own imports, the effect is that the template is a good example of current Angular practice but a poor base for code written against older Angular idioms. A component in this template looks like this:

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [CommonModule, NzButtonModule],
  templateUrl: './example.component.html'
})
export class ExampleComponent {}

Route transitions use the View Transitions API through the router provider, with the initial transition skipped:

provideRouter(routes, withViewTransitions({ skipInitialTransition: true }))

Signals hold the state that used to live in RxJS

The template uses signals for the parts of the state that are naturally flags and settings, and keeps RxJS for streams. A theme service in the project looks like this:

export class ThemeService {
  $isNightTheme = signal(false);
  $themesOptions = signal<SettingInterface>({ ...defaultOptions });
  
  toggleTheme() {
    this.$isNightTheme.update(v => !v);
  }
}

The pattern is a service exposing writable signals, updated with update() rather than a subscription. Elsewhere the project still leans on observables, and the responsive layout helper returns a stream of breakpoints that a component consumes with takeUntilDestroyed, so the two styles coexist rather than one replacing the other. That is a reasonable position for a template, since most application code still deals with asynchronous data, and the important detail for someone extending it is that the signals are plain Angular signals rather than a state library, so there is no extra dependency to learn or to unlearn.

Route reuse and tabs are the reason the template exists

The distinctive feature is a route caching mechanism that behaves like keep-alive in Vue, with scroll position memory, combined with a multi tab interface that supports a right-click menu and drag ordering. The cache is configured through data on the route definition, with a unique key, an optional shouldDetach flag to force a route out of the cache, and an optional scrollContain list of selectors whose scroll positions are restored. Two lifecycle hooks fire when a tab is entered or left, and the documentation says they are triggered when switching tabs. The multi tab system also groups routes by title, so an add and an edit route that share a title are treated as the same business group and open in the same tab rather than a new one. The practical reading is that this is a template aimed at back office applications where a user works across many list and form screens, and that the tab system is the part you will either adopt wholesale or strip out.

Themes, four languages, lock screen and button level permissions

The UI layer is where a Chinese admin template shows its priorities. Four theme styles ship, the default, a dark mode, an Aliyun flavoured theme and a compact one, switchable at runtime. Internationalisation uses the @ngx-translate/core package, with runtime switching that needs no page reload and with the language preference persisted in localStorage. Four locales are provided, Simplified Chinese, Traditional Chinese, English and Vietnamese, with translation files under public/i18n, and the coverage is described as extending across menus, tab titles, the browser tab title and the settings panel. Translation keys are namespaced, with a common namespace for shared strings and a menu namespace keyed by menu code, and templates use the translate pipe for text interpolation, for property binding such as a placeholder, and for dynamic keys assembled from a menu code. Security features listed alongside this are a lock screen and fine grained, button level permission control.

The fastest path to a running UI uses MSW, not the server

The quick start is explicitly a front end only path, with mock data supplied by MSW, the Mock Service Worker, so that the full feature set can be tried without starting a back end. The sequence is a clone of the repository, a move into the ui directory, npm install, npm start, and then a browser visit to the local development server on port 4201. There is also a hosted preview of the same build on the project's GitHub Pages site, which is the fastest way to judge the tab behaviour and the theme switcher. A third variant is offered for people who want the infrastructure with no business code at all, hosted as a separate pure template on Gitee. The important caveat is what MSW is: it is a demonstration scaffold that fakes the endpoints the template expects, and it is not a contract for a real API. Treat it as a way to see the interface work, not as a specification your server must satisfy.

The NestJS side brings RBAC, JWT and a real database

The optional back end lives in the nest-api directory and is a NestJS service with PostgreSQL and Drizzle ORM. The access model is the usual Chinese enterprise shape: users, roles, menus and permissions, with menu level and button level granularity, and JWT for authentication. The module set covers user management, department management and menu management. Running it locally is a Docker step for the PostgreSQL container followed by importing the SQL dump, with the connection details given in the README as host localhost, user admin, password 123456 and database ng-antd-admin-db, and the dump file named ng-antd-admin-db.sql inside the nest-api directory. The front end then needs its mockEnabled flag switched in the environment file, which is the switch that tells the front end to talk to the real API instead of the mocked one. Those default credentials are development conveniences and should be changed before anything is exposed.

The release history shows a project that tracks Angular closely

The version tags say something useful about the maintenance model. v22.0 was published on 2026-06-24 with a note that it fixes a JWT vulnerability, v21.0 on 2026-06-06 is labelled the last version of that line, and v20.0.1 on 2025-11-27 is labelled the last ng20 version. The pattern is one major line per Angular major, with the older line frozen when a new one appears, which is what a template that promises to follow the official Angular versions looks like in practice. The repository is not archived and the last push was on 2026-10-19, so the current Angular line is still moving. The licence is MIT, with the LICENSE file at the repository root, and the documentation, the online preview and the changelog are all linked from the README, with the changelog hosted on the releases page of the repository rather than as a file in the tree.

Editorial conclusion

Adopt ng-antd-admin if you need an admin console in Chinese or English that already has role based access control, tab management, theming and an RBAC backend, and you are willing to inherit the project's Angular version choices and its NestJS conventions. Do not adopt it as a neutral starting point for a non Chinese product without reading the translation structure, and do not expect the mock layer to resemble your real API, since MSW is a demonstration scaffold rather than a contract. Before you build on it, check the release you pin for the JWT fix noted in v22.0, confirm the Angular and ng-zorro versions in package.json match the ones the README documents, and decide whether the bundled database credentials and the mockEnabled flag suit your deployment.

Frequently asked questions

Official sources

1. huajian123/ng-antd-admin on GitHub
2. License: MIT
3. Project website
4. README
5. Releases