Angular2+如何基于环境变量禁用已导入的模块

核心逻辑利用Angular NgModule 的 imports 数组支持动态值的特性，直接通过环境变量判断是否加载OIDC相关模块即可。

1. 新增环境变量配置 #

在项目 src/environments 目录下的对应环境配置文件中，添加SSO开关配置：

// environment.ts（JWT模式用例）
export const environment = {
  production: false,
  enableSSO: false, // 关闭则不加载OIDC模块，走JWT认证逻辑
  // 其他原有配置项
};

// environment.sso.ts（SSO模式配置用例）
export const environment = {
  production: true,
  enableSSO: true, // 开启则加载OIDC模块
  // 其他原有配置项
};

2. 模块中动态控制OIDC导入 #

在根模块AppModule或核心认证模块的imports配置中，通过环境变量判断是否加载OIDC模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { environment } from '../environments/environment';
// 导入OIDC依赖（以常用的angular-auth-oidc-client为例，可替换为项目使用的OIDC库）
import { AuthModule, LogLevel } from 'angular-auth-oidc-client';

import { AppComponent } from './app.component';
// 其他固定导入的业务模块

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    // 其他固定导入模块
    // 动态判断是否导入OIDC模块
    environment.enableSSO ? AuthModule.forRoot({
      config: {
        authority: '你的SSO认证服务地址',
        redirectUrl: window.location.origin,
        clientId: '你的SSO客户端ID',
        scope: 'openid profile email',
        responseType: 'code',
        logLevel: LogLevel.Error,
        // 其他OIDC配置项
      }
    }) : [], // 关闭SSO时返回空数组，不加载OIDC模块
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 认证服务兼容处理 #

为了避免JWT模式下调用OIDC能力抛出异常，需要给OIDC服务注入添加可选标记，同时所有认证逻辑都加环境变量判断：

import { Injectable, Optional } from '@angular/core';
import { environment } from '../../environments/environment';
import { OidcSecurityService } from 'angular-auth-oidc-client';
// 导入项目自身的JWT认证服务
import { JwtAuthService } from './jwt-auth.service';

@Injectable({ providedIn: 'root' })
export class AuthService {
  constructor(
    private jwtAuthService: JwtAuthService,
    // 加@Optional标记，OIDC模块未导入时不会抛出依赖注入错误
    @Optional() private oidcSecurityService?: OidcSecurityService
  ) {}

  login() {
    if (environment.enableSSO && this.oidcSecurityService) {
      // SSO模式走OIDC认证逻辑
      this.oidcSecurityService.authorize();
      return;
    }
    // 非SSO模式走JWT认证逻辑
    this.jwtAuthService.login();
  }

  // 登出、鉴权等其他认证相关方法都参照上述逻辑加判断即可
}

注意事项 #

• 路由守卫、HTTP拦截器中涉及认证逻辑的部分，也需要同步加enableSSO判断，适配两套认证逻辑
• JWT模式下没有任何代码引用OIDC相关依赖时，Angular打包会自动Tree Shaking剔除OIDC相关代码，不会增加产物体积
• 如果需要切换模式打包，只需要在angular.json中配置对应环境的替换规则，打包时指定对应配置即可

内容的提问来源于stack exchange，提问作者mahmoud noby