Here lies the code for my component file. My goal is to develop a reusable modal component using ng-bootstrap's modal feature. However, upon trying to import the following component from the shared module, I encounter a static injector error. Despite researching various resources, I am unable to pinpoint the issue with my implementation.
import {Component} from '@angular/core';
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'ngbd-modal-basic',
templateUrl: './customM.component.html'
})
export class CustomModalComponent {
closeResult: string;
constructor(private modalService: NgbModal) {}
open(content) {
this.modalService.open(content).result.then((result) => {
this.closeResult = `Closed with: ${result}`;
}, (reason) => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});
}
private getDismissReason(reason: any): string {
if (reason === ModalDismissReasons.ESC) {
return 'by pressing ESC';
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
return 'by clicking on a backdrop';
} else {
return `with: ${reason}`;
}
}
}
Below is the SharedModule where the ModalComponent is declared and exported.
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoaderComponent } from './loader/loader.component';
import * as Shared from './index';
@NgModule({
imports: [
CommonModule
],
declarations: [
LoaderComponent,
Shared.CustomModalComponent
],
exports: [
LoaderComponent,
Shared.CustomModalComponent
],
providers: []
})
export class SharedModule {
// static forRoot() : ModuleWithProviders {
// return {
// ngModule: SharedModule,
// providers: [ WebsocketService ]
// }
// }
}
The static injector error arises at the declaration within the constructor of the following code snippet.
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { finalize } from 'rxjs/operators';
import { environment } from '@env/environment';
import { Logger, I18nService, AuthenticationService } from '@app/core';
import { CustomModalComponent } from '../shared/_directives/custom-modal/customM.component';
const log = new Logger('Login');
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
version: string = environment.version;
error: string;
loginForm: FormGroup;
isLoading = false;
constructor(private router: Router,
private formBuilder: FormBuilder,
private i18nService: I18nService,
private authenticationService: AuthenticationService,
private c: CustomModalComponent) {
this.createForm();
}
Main App.module file
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { TranslateModule } from '@ngx-translate/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { CoreModule } from '@app/core';
import { SharedModule } from '@app/shared';
import { HomeModule } from './home/home.module';
import { AboutModule } from './about/about.module';
import { LoginModule } from './login/login.module';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
NoopAnimationsModule,
FormsModule,
HttpModule,
TranslateModule.forRoot(),
NgbModule.forRoot(),
CoreModule,
SharedModule,
HomeModule,
AboutModule,
LoginModule,
NgxChartsModule,
AppRoutingModule
],
declarations: [AppComponent],
providers: [ ],
bootstrap: [AppComponent]
})
export class AppModule { }