Пока у меня есть проект Angular 7, в котором есть пара модулей, а также моя пользовательская библиотека с общей функциональностью, переданной на аутсорсинг, и проект и библиотека должны использовать AngularFire.Проблема, возникающая при попытке выполнить следующую настройку, заключается в том, что при посещении моего веб-сайта из браузера возникает ошибка, подобная этой.
Error: StaticInjectorError(AppModule)[AngularFirestore -> InjectionToken angularfire2.app.options]:
StaticInjectorError(Platform: core)[AngularFirestore -> InjectionToken angularfire2.app.options]:
NullInjectorError: No provider for InjectionToken angularfire2.app.options!
at NullInjector.get (core.js:8896)
at resolveToken (core.js:9141)
at tryResolveToken (core.js:9085)
at StaticInjector.get (core.js:8982)
at resolveToken (core.js:9141)
at tryResolveToken (core.js:9085)
at StaticInjector.get (core.js:8982)
at resolveNgModuleDep (core.js:21218)
at _createClass (core.js:21271)
at _createProviderInstance (core.js:21235)
Вот настройки модулей:
app.module.ts
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { AppRoutingModule } from "./app-routing.module";
import { CoreModule, firebaseConfig } from "./core/core.module";
import { SharedModule } from "./shared/shared.module";
import { FormsModule } from "@angular/forms";
import { HttpClient, HttpClientModule } from "@angular/common/http";
import { TranslateModule, TranslateLoader } from "@ngx-translate/core";
import { TranslateHttpLoader } from "@ngx-translate/http-loader";
import { NgPipesModule } from "ngx-pipes";
import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
import { ChartModule, HIGHCHARTS_MODULES } from "angular-highcharts";
import { ScrollToModule } from "ng2-scroll-to-el";
import { NgCircleProgressModule } from "ng-circle-progress";
import { AngularFireModule } from "@angular/fire";
import { AngularFireAuthModule } from "@angular/fire/auth";
import { AngularFireStorageModule } from "@angular/fire/storage";
import { AngularFirestoreModule } from "@angular/fire/firestore";
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);
}
declare var require: any;
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
AppRoutingModule,
SharedModule,
CoreModule,
FormsModule,
NgPipesModule,
HttpClientModule,
BrowserAnimationsModule,
NgbModule,
ChartModule,
AngularFireModule.initializeApp(firebaseConfig),
AngularFireAuthModule,
AngularFireStorageModule,
AngularFirestoreModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
}),
NgCircleProgressModule.forRoot({}),
ScrollToModule.forRoot()
],
providers: [
{
provide: HIGHCHARTS_MODULES,
useFactory: () => [require("highcharts/highcharts-more.src")]
} // add as factory to your providers
],
bootstrap: [AppComponent]
})
export class AppModule {}
Core.module.ts:
import {
Compiler,
COMPILER_OPTIONS,
CompilerFactory,
NgModule
} from "@angular/core";
import { JitCompilerFactory } from "@angular/platform-browser-dynamic";
import { registerLocaleData } from "@angular/common";
import localeUk from "@angular/common/locales/uk";
registerLocaleData(localeUk);
import { HeaderComponent } from "./header/header.component";
import { AppRoutingModule } from "../app-routing.module";
import { SharedModule } from "../shared/shared.module";
import { CoreRoutingModule } from "./core-routing.module";
import { MainAreaComponent } from "./main-area/main-area.component";
import { TranslateModule } from "@ngx-translate/core";
import { StrengthsService } from "./strengths.service";
import { ScoreCardsService } from "./score-cards.service";
import { GroupsService } from "./groups.service";
import { StudentsService } from "./students.service";
import { TutorsService } from "./tutors.service";
import { SubjectsService } from "./subjects.service";
import { ConditionsService } from "./conditions.service";
import { ChartsDataService } from "./charts/charts-data.service";
import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
import { SettingsService } from "./settings.service";
import { AuthService, TCoreModule } from "@eriendel/t-core";
import { environment } from "../../environments/environment";
export function createCompiler(fn: CompilerFactory): Compiler {
return fn.createCompiler();
}
export const firebaseConfig = environment.firebaseConfig;
@NgModule({
declarations: [HeaderComponent, MainAreaComponent],
imports: [
SharedModule,
AppRoutingModule,
CoreRoutingModule,
TranslateModule.forChild(),
NgbModule,
TCoreModule.forChild({
autoAuthRoleCredentials: environment.autoAuthRoleCredentials
})
],
exports: [AppRoutingModule, HeaderComponent],
providers: [
{
provide: COMPILER_OPTIONS,
useValue: {},
multi: true
},
{
provide: CompilerFactory,
useClass: JitCompilerFactory,
deps: [COMPILER_OPTIONS]
},
{
provide: Compiler,
useFactory: createCompiler,
deps: [CompilerFactory]
},
ScoreCardsService,
StrengthsService,
GroupsService,
StudentsService,
TutorsService,
SubjectsService,
ConditionsService,
ChartsDataService,
SettingsService,
AuthService
]
})
export class CoreModule {}
И модуль моей библиотеки t-core.module.ts:
import { ModuleWithProviders, NgModule, LOCALE_ID } from "@angular/core";
import { HTTP_INTERCEPTORS, HttpClient } from "@angular/common/http";
import { TranslateHttpLoader } from "@ngx-translate/http-loader";
import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
import { RouterModule } from "@angular/router";
import { CommonModule, registerLocaleData } from "@angular/common";
import localeUk from "@angular/common/locales/uk";
registerLocaleData(localeUk);
import { TranslateLoader, TranslateModule } from "@ngx-translate/core";
import { LoggingInterceptor } from "./logging.interceptor";
import { NotFoundComponent } from "./not-found/not-found.component";
import { SidebarComponent } from "./sidebar/sidebar.component";
import { AuthService } from "./auth.service";
import { DatesService } from "./dates.service";
import { LocalizationService } from "./localization.service";
import { CalculationsService } from "./calculations/calculations.service";
import { NavService } from "./nav.service";
import { SigninComponent } from "./auth/signin/signin.component";
import { ChangePassComponent } from "./auth/change-pass/change-pass.component";
import { AntiAuthGuard } from "./auth/antiAuth.guard";
import {
AuthGuard,
AutoAuthRoleCredential,
AUTO_AUTH_ROLE_CREDENTIALS
} from "./auth.guard";
import { FormsModule } from "@angular/forms";
import { HttpLoaderFactory } from "./HttpLoaderFactory";
import { UIModule } from "./ui/ui.module";
import { AngularFireModule, FirebaseAppConfig } from "@angular/fire";
import { AngularFireAuthModule, AngularFireAuth } from "@angular/fire/auth";
import {
AngularFirestoreModule,
AngularFirestore
} from "@angular/fire/firestore";
import { AngularFireStorageModule } from "@angular/fire/storage";
export interface TCoreModuleConfig {
autoAuthRoleCredentials: AutoAuthRoleCredential[];
}
// @dynamic
@NgModule({
declarations: [
NotFoundComponent,
SidebarComponent,
SigninComponent,
ChangePassComponent
],
imports: [
RouterModule,
CommonModule,
FormsModule,
UIModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
}),
NgbModule
],
exports: [
SidebarComponent,
NotFoundComponent,
SigninComponent,
ChangePassComponent
]
})
export class TCoreModule {
static forRoot(config: TCoreModuleConfig): ModuleWithProviders {
return {
ngModule: TCoreModule,
providers: [
AuthService,
CalculationsService,
DatesService,
LocalizationService,
NavService,
AntiAuthGuard,
AuthGuard,
{
provide: AUTO_AUTH_ROLE_CREDENTIALS,
useValue: config.autoAuthRoleCredentials
},
{
provide: HTTP_INTERCEPTORS,
useClass: LoggingInterceptor,
multi: true
},
{
provide: LOCALE_ID,
deps: [LocalizationService],
useFactory: localizationService =>
localizationService.getLocale()
},
AngularFirestore,
AngularFireAuth
]
};
}
static forChild(config: TCoreModuleConfig): ModuleWithProviders {
return this.forRoot(config);
}
}
Так что проблема здесь, как я вижу, заключается в том, что у меня нет возможности инициализировать AngularFireModule в моем базовом модуле библиотеки.Для этого мне нужно иметь конфигурацию firebase, доступную в разделе импорта модуля t-core`, и это можно сделать только в методе forRoot () класса модуля t-core, что слишком поздно для импорта AFAIK.
Есть ли другой способ сделать эту работу?