模块联合-没有AngularFireAuth提供者

编程问答 2022-08-23

问题描述

我正在尝试使用Angular和NgRX实现模块联合，但是我遇到了一个问题，不知道如何解决。

问题是：当 X 应用程序从 Y 延迟加载模块时 使用Firebase的应用程序，Angular无法识别火灾 身份验证提供者。

我有2个应用程序： Auth 和 Dashboard 。

我的 Auth 应用程序使用Firebase进行用户登录。

firebase请求登录是通过NgRX效果进行的：

    import {AngularFireAuth} from '@angular/fire/auth';

    @Injectable()
    export class AuthEffects {
      
      userLogin$: Observable<Action> = createEffect(() => {
        /* effect implementation */
      });
      
      constructor(private fireAuth: AngularFireAuth){}
    }

AuthModule 导入：

imports: [
    /* ...other imports */
    StoreModule.forFeature('authState',authReducer),EffectsModule.forFeature([AuthEffects]),AngularFireModule.initializeApp(firebaseConfig),AngularFireAuthModule
]

仪表板AppRoutingModule 导入：

const routes: Routes = [
  {
      path: '',pathMatch: 'full',loadChildren: () => import('auth/AuthModule').then(m => m.AuthModule)
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],exports: [RouterModule]
})

当我仅启动 Auth 应用程序时，一切正常，我可以登录。

但是当我尝试在 Dashboard 应用程序内部远程使用 Auth 应用程序时，出现此错误：

NullInjectorError: StaticInjectorError(AppModule)[InjectionToken angularfire2.app.options]: 
  StaticInjectorError(Platform: core)[InjectionToken angularfire2.app.options]: 
    NullInjectorError: No provider for InjectionToken angularfire2.app.options!

部分 Auth -webpack.config.js 

    plugins: [
        new ModuleFederationPlugin({
          name: 'auth',library: {type: 'var',name: 'auth'},filename: 'remoteEntry.js',exposes: {
            './AuthModule': './src/app/login/auth.module.ts','./AuthComponent': './src/app/login/auth.component.ts','./AuthActions': './src/app/store/actions/auth.actions.ts','./AuthReducer': './src/app/store/reducers/auth.reducer.ts','./AuthEffects': './src/app/store/effects/auth.effects'
          },shared: {
            ...dependencies,'@angular/core': {
              requiredVersion: dependencies['@angular/core'],singleton: true,},'@angular/common': {
              requiredVersion: dependencies['@angular/common'],'@angular/router': {
              requiredVersion: dependencies['@angular/router'],}
          }
        })
    ]

Parial 仪表板-webpack.config.js 

    plugins: [
        new ModuleFederationPlugin({
          name: 'dashboard',name: 'dashboard'},remotes: {
            auth: 'auth',}
          }
        })
      ]

我试图自己解决它，但是Module Federation是一个新事物，我们的帖子很少。

有人可以帮助我吗？如果您来到这里，非常感谢！ ：D

解决方法

解决了！

感谢扎克·杰克逊，我可以解决问题。

解决方案：

https://github.com/module-federation/module-federation.github.io/issues/14#issuecomment-672647713

angularfederationfirebasefirebasejavascriptmodulemodule