ng-lite-spa-core

A lightweight SPA framework built on Angular 20 core modules.

Live on npm: https://www.npmjs.com/package/ng-lite-spa-core

Installation

Install from npm (Recommended)

npm install ng-lite-spa-core

Or with yarn:

yarn add ng-lite-spa-core

Install Required Peer Dependencies

npm install @angular/core@^20.0.0 @angular/common@^20.0.0 @angular/platform-browser@^20.0.0

Usage

// Import router
import { LiteRouter, Route } from 'ng-lite-spa-core/router';

// Import state management
import { createState, LiteState } from 'ng-lite-spa-core/state';

// Import directives
import { 
  LiteRouterOutletDirective,
  LiteRouterLinkDirective,
  LiteAutoFocusDirective
} from 'ng-lite-spa-core/directives';

// Import pipes
import { FilterPipe, TruncatePipe } from 'ng-lite-spa-core/pipes';

// Or import everything from main entry
import { 
  LiteRouter, 
  createState,
  LiteRouterOutletDirective 
} from 'ng-lite-spa-core';

Quick Start

1. Define Routes

import { Route } from 'ng-lite-spa-core/router';

export const routes: Route[] = [
  {
    path: '/',
    loadComponent: () => import('./home/home.component')
      .then(m => m.HomeComponent)
  }
];

2. Configure App

import { ApplicationConfig, APP_INITIALIZER } from '@angular/core';
import { LiteRouter } from 'ng-lite-spa-core/router';

function initRouter(router: LiteRouter) {
  return () => router.configure(routes, true);
}

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initRouter,
      deps: [LiteRouter],
      multi: true
    }
  ]
};

3. Use in Template

import { Component } from '@angular/core';
import { 
  LiteRouterOutletDirective,
  LiteRouterLinkDirective 
} from 'ng-lite-spa-core/directives';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [LiteRouterOutletDirective, LiteRouterLinkDirective],
  template: `
    <nav>
      <a [liteRouterLink]="'/'">Home</a>
      <a [liteRouterLink]="'/about'">About</a>
    </nav>
    <div liteRouterOutlet></div>
  `
})
export class AppComponent {}

4. State Management

import { Injectable, computed } from '@angular/core';
import { createState } from 'ng-lite-spa-core/state';

@Injectable({ providedIn: 'root' })
export class DataService {
  private state = createState({
    initialValue: { items: [] },
    persist: true,
    storageKey: 'my-data'
  });

  readonly items = computed(() => this.state.get().items);

  addItem(item: any) {
    this.state.update(s => ({
      items: [...s.items, item]
    }));
  }
}

Features

• ✅ Custom Router (hash/path mode)
• ✅ Lazy Loading
• ✅ Signal-based State Management
• ✅ State Persistence
• ✅ Directives (RouterOutlet, RouterLink, AutoFocus)
• ✅ Pipes (Filter, Truncate)
• ✅ TypeScript Support
• ✅ ~150KB gzipped

API Reference

Router Methods

| Method | Description | |--------|-------------| | configure(routes, useHash) | Initialize router with routes | | navigate(path, options?) | Navigate to a path | | back() | Go back in history | | forward() | Go forward in history | | currentPath() | Get current path signal | | currentParams() | Get current params signal | | currentQuery() | Get current query signal |

State Methods

| Method | Description | |--------|-------------| | get() | Get current value | | set(value) | Set new value | | update(fn) | Update with function | | select(selector) | Create computed value | | reset() | Reset to initial value |

Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Modern browsers with ES2022 support

Changelog

See CHANGELOG.md for version history.

Contributing

Issues and pull requests are welcome!

Author

sachetacharya

• npm: https://www.npmjs.com/~sachetacharya

Links

• npm Package: https://www.npmjs.com/package/ng-lite-spa-core
• Documentation: See project README.md
• Demo App: Included in repository

License

• See LICENSE file for details