@d4k-ui/theme

Angular UI component library built on top of Nebular, migrated to the standalone components API. Provides a full set of UI components (NbCard, NbButton, NbSidebar, etc.) along with theming support and provider functions (provideNbTheme()) compatible with Angular's standalone bootstrap flow.

Migration from Nebular

If your project uses @nebular/theme with the NgModule-based API (NbThemeModule, NbSidebarModule, etc.), run the migration schematic to convert it to @d4k-ui/theme standalone components and provider functions:

ng generate @d4k-ui/theme:migrate-from-nebular

Options

| Option | Type | Default | Description | |---|---|---|---| | --project | string | current project | Angular project name from angular.json | | --path | string | / | Root path to scan. Useful to limit migration scope |

# migrate a specific project
ng generate @d4k-ui/theme:migrate-from-nebular --project my-app

# migrate only one feature folder
ng generate @d4k-ui/theme:migrate-from-nebular --path src/app/features/dashboard

What the schematic does

The schematic scans every .ts file under the target path and applies the following transformations:

1. NbThemeModule.forRoot() → provideNbTheme()

// before
@NgModule({
  imports: [
    NbThemeModule.forRoot({ name: 'default' }),
    NbSidebarModule.forRoot(),
    NbMenuModule.forRoot(),
    NbDialogModule.forRoot(),
    NbToastrModule.forRoot(),
    NbWindowModule.forRoot(),
  ],
})
export class AppModule {}

// after
@NgModule({
  providers: [
    provideNbTheme({ name: 'default' }),
    provideNbSidebar(),
    provideNbMenu(),
    provideNbDialog(),
    provideNbToastr(),
    provideNbWindow(),
  ],
})
export class AppModule {}

2. NgModule imports → standalone components (only what's used in templates)

The schematic reads each component's template (inline or from templateUrl) and imports only the components and directives whose selectors actually appear in that template. For @NgModule, all HTML files in the project are scanned.

// before
@Component({
  standalone: true,
  imports: [NbCardModule, NbButtonModule, NbIconModule],
  template: `
    <nb-card>
      <nb-card-body>
        <button nbButton><nb-icon icon="plus"></nb-icon></button>
      </nb-card-body>
    </nb-card>
  `,
})

// after — NbCardHeaderComponent / NbCardFooterComponent not added because they are not in the template
@Component({
  standalone: true,
  imports: [NbCardComponent, NbCardBodyComponent, NbButtonComponent, NbIconComponent],
  template: `...`,
})

3. Non-module imports (services, tokens, types) are re-targeted automatically

Any name imported from @nebular/theme that is not a module class is moved to @d4k-ui/theme unchanged — services, injection tokens, interfaces, etc.

// before
import { NbThemeService, NbSidebarService, NbLayoutDirection } from '@nebular/theme';

// after
import { NbLayoutDirection, NbSidebarService, NbThemeService } from '@d4k-ui/theme';

4. importProvidersFrom() in app.config.ts is handled

The standalone app bootstrap pattern (importProvidersFrom) is fully supported. Nebular modules are extracted and replaced with provideNb*() calls; unrelated modules stay.

// before — app.config.ts
providers: [
  importProvidersFrom([
    NbThemeModule.forRoot(),
    NbMenuModule.forRoot(),
    NbToastrModule.forRoot(),
    NbSidebarModule.forRoot(),
    NbDialogModule.forRoot(),
    NbEvaIconsModule,
    NgxSpinnerModule,   // ← third-party, kept
  ]),
]

// after
providers: [
  importProvidersFrom([NgxSpinnerModule]),  // third-party stays
  provideNbTheme(),
  provideNbMenu(),
  provideNbToastr(),
  provideNbSidebar(),
  provideNbDialog(),
  // NbEvaIconsModule removed — bundled in provideNbTheme()
]

When all modules inside importProvidersFrom are Nebular, the entire call is replaced:

// before
importProvidersFrom([NbThemeModule.forRoot({ name: 'default' }), NbSidebarModule.forRoot()])

// after — importProvidersFrom wrapper removed completely
provideNbTheme({ name: 'default' }), provideNbSidebar()

5. @nebular/eva-icons import is removed

NbEvaIconsModule is no longer needed — Eva Icons are registered automatically inside provideNbTheme(). The @nebular/eva-icons import statement is removed entirely.

// before
import { NbEvaIconsModule } from '@nebular/eva-icons';
// NbEvaIconsModule in imports: []

// after — line removed, no replacement needed

6. SCSS package paths are rewritten

All @forward / @use rules that reference @nebular/theme are updated in place:

/* before */
@forward '@nebular/theme/styles/theming';
@use '@nebular/theme/styles/theming' as *;
@use '@nebular/theme/styles/themes/default';

/* after */
@forward '@d4k-ui/theme/styles/theming';
@use '@d4k-ui/theme/styles/theming' as *;
@use '@d4k-ui/theme/styles/themes/default';

7. fieldSize → size in templates

nbInput renamed its sizing input. The schematic rewrites both plain and bound forms:

<!-- before -->
<input nbInput fieldSize="large">
<input nbInput [fieldSize]="mySize">

<!-- after -->
<input nbInput size="large">
<input nbInput [size]="mySize">

8. Appearance boolean attributes → appearance="value"

Standalone appearance attributes (outline, filled, ghost, hero) are consolidated into the unified appearance input, in both .html files and inline template: strings:

<!-- before -->
<button nbButton outline>…</button>
<button nbButton hero status="success">…</button>
<nb-select filled placeholder="…"></nb-select>
<nb-tag outline>…</nb-tag>

<!-- after -->
<button nbButton appearance="outline">…</button>
<button nbButton appearance="hero" status="success">…</button>
<nb-select appearance="filled" placeholder="…"></nb-select>
<nb-tag appearance="outline">…</nb-tag>

For nb-alert, the outline="status" shorthand is split into two separate inputs:

<!-- before -->
<nb-alert outline="danger">Error</nb-alert>

<!-- after -->
<nb-alert appearance="outline" status="danger">Error</nb-alert>

9. TypeScript imports are rewritten

The @nebular/theme import is replaced in-place by a @d4k-ui/theme import containing all the new standalone identifiers, sorted alphabetically and wrapped to multiple lines when the line exceeds 120 characters.

Module → provider function reference

| Old | New | |---|---| | NbThemeModule.forRoot(opts) | provideNbTheme(opts) | | NbSidebarModule.forRoot() | provideNbSidebar() | | NbMenuModule.forRoot() | provideNbMenu() | | NbDialogModule.forRoot(cfg) | provideNbDialog(cfg) | | NbToastrModule.forRoot(cfg) | provideNbToastr(cfg) | | NbWindowModule.forRoot(cfg) | provideNbWindow(cfg) |

Module → standalone components reference

| Old module | New standalone imports | |---|---| | NbAccordionModule | NbAccordionComponent, NbAccordionItemComponent, NbAccordionItemHeaderComponent, NbAccordionItemBodyComponent | | NbActionsModule | NbActionsComponent, NbActionComponent | | NbAlertModule | NbAlertComponent | | NbAutocompleteModule | NbAutocompleteComponent, NbAutocompleteDirective | | NbBadgeModule | NbBadgeComponent | | NbButtonModule | NbButtonComponent | | NbButtonGroupModule | NbButtonGroupComponent, NbButtonToggleDirective | | NbCalendarModule | NbCalendarComponent | | NbCalendarRangeModule | NbCalendarRangeComponent | | NbCalendarKitModule | NbCalendarActionsComponent, NbCalendarDayCellComponent, NbCalendarDayPickerComponent, NbCalendarDaysNamesComponent, NbCalendarMonthCellComponent, NbCalendarMonthPickerComponent, NbCalendarPageableNavigationComponent, NbCalendarPickerComponent, NbCalendarPickerRowComponent, NbCalendarViewModeComponent, NbCalendarWeekNumberComponent, NbCalendarYearCellComponent, NbCalendarYearPickerComponent | | NbCardModule | NbCardComponent, NbCardBodyComponent, NbCardHeaderComponent, NbCardFooterComponent | | NbCheckboxModule | NbCheckboxComponent | | NbContextMenuModule | NbContextMenuDirective | | NbChatModule | NbChatComponent, NbChatMessageComponent, NbChatFormComponent, NbChatAvatarComponent, NbChatMessageTextComponent, NbChatMessageFileComponent, NbChatMessageQuoteComponent, NbChatMessageMapComponent, NbChatCustomMessageDirective, NbChatTitleDirective | | NbDatepickerModule | NbDatepickerDirective, NbDatepickerComponent, NbRangepickerComponent, NbDateTimePickerComponent, NbCalendarWithTimeComponent | | NbFormFieldModule | NbFormFieldComponent, NbPrefixDirective, NbSuffixDirective | | NbIconModule | NbIconComponent | | NbInputModule | NbInputDirective | | NbLayoutModule | NbLayoutComponent, NbLayoutColumnComponent, NbLayoutHeaderComponent, NbLayoutFooterComponent, NbLtrDirective, NbRtlDirective | | NbListModule | NbListComponent, NbListItemComponent, NbInfiniteListDirective, NbListPageTrackerDirective | | NbMenuModule | NbMenuComponent, NbMenuItemComponent | | NbOptionModule | NbOptionComponent, NbOptionGroupComponent, NbOptionListComponent | | NbPopoverModule | NbPopoverDirective | | NbProgressBarModule | NbProgressBarComponent | | NbRadioModule | NbRadioComponent, NbRadioGroupComponent | | NbRouteTabsetModule | NbRouteTabsetComponent | | NbSearchModule | NbSearchComponent, NbSearchFieldComponent | | NbSelectModule | NbSelectComponent, NbSelectLabelComponent | | NbSelectWithAutocompleteModule | NbSelectWithAutocompleteComponent | | NbSidebarModule | NbSidebarComponent, NbSidebarHeaderComponent, NbSidebarFooterComponent | | NbSpinnerModule | NbSpinnerComponent, NbSpinnerDirective | | NbStepperModule | NbStepperComponent, NbStepComponent, NbStepperNextDirective, NbStepperPreviousDirective | | NbTabsetModule | NbTabsetComponent, NbTabComponent, NbTabContentDirective, NbTabTitleDirective | | NbTagModule | NbTagComponent, NbTagListComponent, NbTagInputDirective | | NbTimepickerModule | NbTimePickerComponent, NbTimePickerCellComponent, NbTimePickerDirective | | NbToastrModule | (provider only, see above) | | NbToggleModule | NbToggleComponent | | NbTooltipModule | NbTooltipDirective | | NbTreeGridModule | NbTreeGridComponent, NbTreeGridColumnDefDirective, NbTreeGridRowDefDirective, NbTreeGridHeaderRowDefDirective, NbTreeGridFooterRowDefDirective, NbTreeGridCellDefDirective, NbTreeGridHeaderCellDefDirective, NbTreeGridFooterCellDefDirective, NbTreeGridCellDirective, NbTreeGridHeaderCellDirective, NbTreeGridFooterCellDirective, NbTreeGridRowToggleComponent, NbTreeGridRowToggleDirective, NbSortDirective, NbSortHeaderComponent, NbSortIconComponent, NbFilterDirective, NbFilterInputDirective | | NbUserModule | NbUserComponent | | NbWindowModule | (provider only, see above) |

Known limitations

• NbTimepickerModule.forRoot(config) / NbDatepickerModule.forRoot() — there are no provideNb* equivalents. The forRoot() call is removed and the components remain in imports. If you relied on the config token (NB_TIME_PICKER_CONFIG), add it manually to providers.
• The schematic only modifies .ts source files — it does not touch angular.json, test files (*.spec.ts), or declaration files (*.d.ts).
• Review the diff before committing. Complex cases (dynamic module references, re-exported modules) may require manual adjustments.

Troubleshooting

0 file(s) updated

The schematic logs a warning when it finds no files importing from @d4k-ui/theme. Check the "Scanning:" line in the output to see which directory was searched.

Scanning: /src
Found 42 TypeScript file(s)
⚠  No files importing from '@d4k-ui/theme' found under '/src'.

Common fixes:

| Cause | Fix | |---|---| | Wrong scan directory | Add --path src/app to narrow the search | | Project not detected | Add --project <name> matching your angular.json key | | Angular workspace not found | Run the command from the workspace root (where angular.json lives) | | Imports already use standalone API | Nothing to migrate — you're done |

After migration

Run ng build to verify everything compiles. If you see NG8001 (unknown element) or NG8002 (unknown attribute) errors, the component or directive is missing from imports — add it manually from the table above.