GUIDE

Performance & Bundling

Ship the component, icon and data work the current screen needs—without turning a design system into one permanent application chunk.

Secondary entry pointsLazy boundariesZoneless ready

IMPORT ONLY WHAT YOU USE

Use granular public entry points

Each Core feature has a dedicated entry point. Importing from @neural-ng/core/button gives the bundler a clear boundary and prevents unrelated components from becoming reachable. Editor remains a separate package because its rich-text runtime is intentionally not part of Core.

import { NeuralButton } from '@neural-ng/core/button';
import { NeuralSelect } from '@neural-ng/core/select';
import { NeuralTable } from '@neural-ng/core/table';

// Dependency-heavy editing stays outside @neural-ng/core.
import { NeuralEditor } from '@neural-ng/editor';

Move feature cost behind navigation

A tree-shakable import can still belong to the initial chunk when its page is eager. Lazy routes and Angular defer blocks delay tables, editors and visualization-heavy features until users can reach or see them.

export const routes: Routes = [
  {
    path: 'reports',
    loadComponent: () =>
      import('./reports/reports.page').then(m => m.ReportsPage),
  },
];

// Inside a template:
@defer (on viewport) {
  <app-large-data-grid />
} @placeholder {
  <neural-skeleton width="100%" height="20rem" />
}

Choose the right icon payload

icons.css contains the curated application set. Category stylesheets add focused groups. all.css is appropriate for an icon browser or user-selectable catalog, not automatically for every application.

/* Curated application essentials */
@import '@neural-ng/icons/icons.css';

/* Add only a required category */
@import '@neural-ng/icons/categories/charts.css';

/* Use only when the application truly needs the complete catalog */
/* @import '@neural-ng/icons/all.css'; */

Render less data, not merely faster templates

Paginator

Split known collections into understandable pages and request remote pages when the server owns the data.

VirtualScroller

Window large, consistently sized lists instead of creating thousands of live elements.

Table remote mode

Keep sorting, filtering and paging on the data source when the client should not own the full result.

Stable identity

Use immutable values and stable keys so Angular can retain DOM and focus across updates.

Zoneless Angular needs no NeuralNg adapter

NeuralNg components use OnPush change detection and Signals for owned state and do not require Zone.js as a library dependency. Configure zoneless change detection at application level and keep your own asynchronous state inside Signals or Angular-aware APIs.

import { ApplicationConfig, provideZonelessChangeDetection } from '@angular/core';
import { provideNeuralNg } from '@neural-ng/core';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZonelessChangeDetection(),
    provideNeuralNg(),
  ],
};

Angular zoneless guide

Optimize first content without creating hydration work

Render useful closed component markup on the server, use Skeleton for intentionally deferred regions and avoid opening overlays during initial rendering. Browser-only measurement and positioning should begin after interaction or an Angular render callback.

Turn bundle expectations into build failures

Angular budgets catch accidental initial-chunk and component-style growth. Start from measured production output, choose explicit warning and error limits, then review increases instead of silently raising them.

"budgets": [
  {
    "type": "initial",
    "maximumWarning": "500kb",
    "maximumError": "1mb"
  },
  {
    "type": "anyComponentStyle",
    "maximumWarning": "20kb",
    "maximumError": "24kb"
  }
]

Production checklist

Import from component entry points

Lazy-load feature routes

Keep Editor outside routes that do not edit

Prefer curated or category icon CSS

Page or virtualize large collections

Use production builds when measuring

Set and review Angular bundle budgets

Verify SSR and hydration after optimization

Primary

Surface