Skip to content

ng-app

Angular shell for micro frontends: many apps in one, with login, permissions and layout ready.

MITTypeScriptActiveVersion 4.0.5

What it's for

As an application grows, every new area ends up rebuilding the same things: login, permissions, menus, translations, error pages. With ng-app those parts live in a thin core for Angular 22, set up with a single call: provideRlbConfig(). Each area becomes an app you describe in a few lines. Several portals, split by domain, and several copies of the same app, say one per company, can share the same base. We use it in Chattoo and we're still shipping new versions. The guide is already on GitHub Pages, in Italian for now; a full README is on the way.

Installation

ng add @open-rlb/ng-app

Example

// app.config.ts
export const appConfig: ApplicationConfig = {
  providers: [
    provideZonelessChangeDetection(),
    provideRlbConfig(environment),
    provideRouter(routes),
    { provide: RLB_INIT_PROVIDER, useClass: AppInitProvider },
    // provideApp(myAppDescriber), una riga per ogni app
  ],
};

export const chatDescriber: AppDescriber = {
  info: {
    type: 'chat',
    enabled: true,
    actions: ['chat-read', 'chat-admin'],
    core:     { title: 'Chat', description: '…', url: 'chat', icon: 'bi bi-chat', auth: true },
    settings: { title: 'Chat settings', description: '…', url: 'settings/chat', icon: 'bi bi-gear', auth: true },
  },
  routes,
  providers: [],
};

What it does

One core, many apps

Each app has a describer with its name, icon, routes and required permissions, and joins the core through provideApp(). Apps are built together with the core into a single application.

OIDC sign-in

Authorization code flow with refresh tokens through angular-auth-oidc-client, one or more providers picked by domain, and token renewal handled by the library. The profile page uses the Keycloak account API.

Permissions down to a single button

After login the library loads the user's permissions. Guards protect routes, and the *roles directive hides what the user can't use.

The shell is ready

Navbar, side menu up to 3 levels deep, mobile menu, light or dark theme and a language switch. You configure it with NgRx actions; there's no shell layout to write.

The pages you always need

Settings, profile, app list and access denied are always there, the first three behind login. Not found, privacy, terms, cookies and support are switched on from the configuration.

Start with ng add

In an empty workspace, ng add creates the core app with production, staging and development configurations. The package also ships 5 Claude Code skills that stay in step with the installed version.

Requirements

  • Angular 22
  • NgRx 22
  • @open-rlb/ng-bootstrap 5.1 or a later 5.x
  • angular-auth-oidc-client 19 to 21
  • @ngx-translate/core 16 or 17
  • ngx-cookie-service 22

The code, releases and issues are on GitHub.