Creating Modules

Learn how to create new feature modules for the Syneo/Barcoding applications.

Overview

Feature modules are reusable packages that can be lazy-loaded into any of the three application instances (Backend, Front, Dashboard).

Module Structure

A typical module follows this structure:

packages/@barcoding/module-example/
├── src/
│   ├── lib/
│   │   ├── components/
│   │   │   ├── list/
│   │   │   ├── detail/
│   │   │   └── form/
│   │   ├── services/
│   │   │   └── example.service.ts
│   │   ├── store/
│   │   │   ├── example.state.ts
│   │   │   └── example.actions.ts
│   │   ├── models/
│   │   │   └── example.model.ts
│   │   ├── routing/
│   │   │   └── example.routes.ts
│   │   └── module-example.module.ts
│   └── index.ts
├── package.json
├── ng-package.json
├── tsconfig.lib.json
└── README.md

Quick Start

1. Generate Module

cd web
ng generate library @barcoding/module-example --prefix=app

2. Add Dependencies

Edit package.json:

{
  "dependencies": {
    "@barcoding/core": "*",
    "@barcoding/sdk": "*",
    "@barcoding/auth-core": "*"
  }
}

3. Create Module File

// src/lib/module-example.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { ExampleRoutes } from './routing/example.routes';

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(ExampleRoutes)
  ]
})
export class ModuleExampleModule {}

4. Build Module

ng build @barcoding/module-example

5. Add to Application

// app.routes.ts
{
  path: 'modules/example',
  loadChildren: () => import('@barcoding/module-example')
    .then(m => m.ModuleExampleModule)
}

Coming Soon

This page is under construction. More details will be added about:

• Complete module creation guide
• Component patterns
• Service patterns
• State management integration
• Testing modules
• Best practices

For now, refer to:

• Package Dependencies
• State Management
• Web Overview