nebular
nebular copied to clipboard
When I tried to open a dialog, the following exception occurred.
ERROR Error: [NbOverlayContainerAdapter]: Layout not found.
When using Nebular '
"@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
Fixed by adding .forRoot()
NbToastrModule.forRoot(),
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,
],
};
}
}
"@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
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.