Angular:有条件导入模块不使用AoT

Question

我正在尝试根据环境文件中是否指定了firebase API键来有条件地导入模块。当没有API密钥时，我不想加载Firebase模块。在环境文件中设置这些值时，我希望同时加载AngularFireAuthModule和AngularFireModule.initializeApp(firebaseConfig)。

以下是我在Angular 7:中的操作方式

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { environment } from '../../../environments/environment';
import { AlwaysLoggedInProvider } from './identity/providers/always-logged-in-provider';
import { AuthHttpInterceptor } from './interceptors/auth-http-interceptor';
import { FirebaseProvider } from './identity/providers/firebase-provider';
import { IdentityProviderToken } from './identity/identity-provider';
const firebaseConfig = environment.firebase;
export const identityProvider = isFirebaseConfigured() ? FirebaseProvider : AlwaysLoggedInProvider;
export function identityProviderModules() {
if (isFirebaseConfigured) {
return [AngularFireModule.initializeApp(firebaseConfig), AngularFireAuthModule];
} else {
return [];
}
}
export function isFirebaseConfigured() {
return firebaseConfig && 'apiKey' in firebaseConfig && firebaseConfig.apiKey !== '';
}
@NgModule({
imports: [...identityProviderModules()],
providers: [
{ provide: IdentityProviderToken, useClass: identityProvider },
{
provide: HTTP_INTERCEPTORS,
useClass: AuthHttpInterceptor,
multi: true,
},
],
})
export class AuthenticationModule { }

现在，在升级到Angular 9之后，一切似乎都正常，但在编译时，我遇到了以下错误：

ERROR in src/app/services/authentication/authentication.module.ts:30:12 - error NG1010: Value at position 0 in the NgModule.imports of AuthenticationModule is not a reference: [object Object]
30   imports: [...identityProviderModules()],
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/services/authentication/authentication.module.ts:40:14 - error NG6002: Appears in the NgModule.imports of LoginModule, but could not be resolved to an NgModule class.
Is it missing an @NgModule annotation?
40 export class AuthenticationModule { }
~~~~~~~~~~~~~~~~~~~~
src/app/login/login.module.ts:26:14 - error NG6002: Appears in the NgModule.imports of AppModule, but itself has errors
26 export class LoginModule {}

我环顾四周，注意到这是由AoT编译(我想保留它(引起的，因为我在identityProviderModules()中有一个条件。我已经为提供商找到了一些解决方案，但由于我正在处理导入，我认为这对我没有多大用处，除非有办法将这些模块转换为提供商。

根据环境文件中的值有条件地导入模块的正确方法是什么？我如何让AoT编译这个？

Answer 1

我刚刚从7升级到10，遇到了类似的问题和类似的错误。我无法使用aot编译器获得一个三进制，所以我最终创建了一个导入数组(下面示例中的myImports(，然后创建了一条if语句来检查我的条件并推入数组。然后，我将数组传递到模块注释的imports:section中，这对我来说很成功

const firebaseConfig = environment.firebase;
export const identityProvider = isFirebaseConfigured() ? FirebaseProvider : AlwaysLoggedInProvider;
// Other imports that are not dynamic can still be included here:
const myImports = [];
export function identityProviderModules() {
if (isFirebaseConfigured) {
myImports.push(AngularFireModule.initializeApp(firebaseConfig), AngularFireAuthModule);
}
export function isFirebaseConfigured() {
return firebaseConfig && 'apiKey' in firebaseConfig && firebaseConfig.apiKey !== '';
}
@NgModule({
imports: myImports,
providers: [
{ provide: IdentityProviderToken, useClass: identityProvider },
{
provide: HTTP_INTERCEPTORS,
useClass: AuthHttpInterceptor,
multi: true,
},
],
})
export class AuthenticationModule { }

我不确定它有多相关，但我有条件导入的模块也缺少现在需要的注释：

@Injectable({
providedIn: 'root',
})
export class ....