nebular icon indicating copy to clipboard operation
nebular copied to clipboard

When I tried to open a dialog, the following exception occurred.

Open LetAmericaGreatAgain opened this issue 1 year ago • 3 comments

ERROR Error: [NbOverlayContainerAdapter]: Layout not found. When using Nebular '' is required and should wrap other nebular components. at throwLayoutNotFoundError (nebular-theme.mjs:1122:11) at NbOverlayContainerAdapter.checkContainer (nebular-theme.mjs:1149:13) at NbOverlayContainerAdapter._createContainer (nebular-theme.mjs:1141:14) at NbOverlayContainerAdapter.getContainerElement (overlay.mjs:754:18) at NbOverlay._createHostElement (overlay.mjs:2561:32) at NbOverlay.create (overlay.mjs:2528:27) at NbOverlayService.create (nebular-theme.mjs:1570:41) at NbDialogService.createOverlay (nebular-theme.mjs:19445:29) at NbDialogService.open (nebular-theme.mjs:19435:33)

LetAmericaGreatAgain avatar Apr 23 '24 07:04 LetAmericaGreatAgain

"@nebular/theme": "^9.0.1",

When using Nebular '<nb-layout>' is required and should wrap other nebular components.

Layout have it and everything wrapped in it image

Fixed by adding .forRoot()

NbToastrModule.forRoot(),

roboter avatar Oct 03 '24 07:10 roboter

For me, I was loading the modules directly in the app.module.ts Now, I just load everything using .forRoot inside theme.module.ts and only load the ThemeModule itself.

import { ModuleWithProviders, NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import {
    NbActionsModule,
    NbLayoutModule,
    NbMenuModule,
    NbSearchModule,
    NbSidebarModule,
    NbUserModule,
    NbContextMenuModule,
    NbButtonModule,
    NbSelectModule,
    NbIconModule,
    NbThemeModule,
    NbDatepickerModule,
    NbDialogModule,
    NbToastrModule,
    NbWindowModule,
} from "@nebular/theme";
import { NbEvaIconsModule } from "@nebular/eva-icons";

import {
    FooterComponent,
    HeaderComponent,
    SearchInputComponent,
    TinyMCEComponent,
} from "./components";
import {
    CapitalizePipe,
    PluralPipe,
    RoundPipe,
    TimingPipe,
    NumberWithCommasPipe,
} from "./pipes";
import {
    OneColumnLayoutComponent,
    ThreeColumnsLayoutComponent,
    TwoColumnsLayoutComponent,
} from "./layouts";
import { DEFAULT_THEME } from "./styles/theme.default";
import { COSMIC_THEME } from "./styles/theme.cosmic";
import { CORPORATE_THEME } from "./styles/theme.corporate";
import { DARK_THEME } from "./styles/theme.dark";

const NB_MODULES = [
    NbLayoutModule,
    NbUserModule,
    NbActionsModule,
    NbSearchModule,
    NbContextMenuModule,
    NbButtonModule,
    NbSelectModule,
    NbIconModule,
    NbEvaIconsModule,
    NbSidebarModule.forRoot(),
    NbMenuModule.forRoot(),
    NbDatepickerModule.forRoot(),
    NbDialogModule.forRoot(),
    NbWindowModule.forRoot(),
    NbToastrModule.forRoot(),
];
const COMPONENTS = [
    HeaderComponent,
    FooterComponent,
    SearchInputComponent,
    TinyMCEComponent,
    OneColumnLayoutComponent,
    ThreeColumnsLayoutComponent,
    TwoColumnsLayoutComponent,
];
const PIPES = [
    CapitalizePipe,
    PluralPipe,
    RoundPipe,
    TimingPipe,
    NumberWithCommasPipe,
];

@NgModule({
    imports: [CommonModule, ...NB_MODULES],
    exports: [CommonModule, ...PIPES, ...COMPONENTS],
    declarations: [...COMPONENTS, ...PIPES],
})
export class ThemeModule {
    static forRoot(): ModuleWithProviders<ThemeModule> {
        return {
            ngModule: ThemeModule,
            providers: [
                ...NbThemeModule.forRoot(
                    {
                        name: "default",
                    },
                    [DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME, DARK_THEME],
                ).providers,
            ],
        };
    }
}

rami-alloush avatar Dec 23 '24 15:12 rami-alloush

"@nebular/theme": "^9.0.1",

When using Nebular '<nb-layout>' is required and should wrap other nebular components.

Layout have it and everything wrapped in it image

Fixed by adding .forRoot()

NbToastrModule.forRoot(),

I added forRoot for NbToastrModule, but I still have error. After NbToastrService appears, the next interaction will get an error.

NguyenPhuocDaiToan avatar May 09 '25 17:05 NguyenPhuocDaiToan