模塊聯合 - 沒有 AngularFireAuth 的提供者

Question

我正在嘗試使用 Angular 和 NgRX 實現模塊聯合，但我遇到了問題，不知道如何解決。

問題是：當X應用程序從使用 Firebase 的Y應用程序延遲加載模塊時，angular 無法識別 Fire auth 提供程序。

我有 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
]

Dashboard AppRoutingModule導入：

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

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

當我只啟動Auth應用程序時，一切正常，我可以登錄。

但是，當我嘗試在儀表板應用程序中遠程使用Auth應用程序時，我收到此錯誤：

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

部分身份驗證- 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'],
              singleton: true,
            },
            '@angular/router': {
              requiredVersion: dependencies['@angular/router'],
              singleton: true,
            }
          }
        })
    ]

Parial儀表板- webpack.config.js

    plugins: [
        new ModuleFederationPlugin({
          name: 'dashboard',
          library: {type: 'var', name: 'dashboard'},
          filename: 'remoteEntry.js',
          remotes: {
            auth: 'auth',
          },
          shared: {
            ...dependencies,
            '@angular/core': {
              requiredVersion: dependencies['@angular/core'],
              singleton: true,
            },
            '@angular/common': {
              requiredVersion: dependencies['@angular/common'],
              singleton: true,
            },
            '@angular/router': {
              requiredVersion: dependencies['@angular/router'],
              singleton: true,
            }
          }
        })
      ]

我試圖自己解決它，但是模塊聯合是一個新事物，我們幾乎沒有關於它的帖子。

有人能幫我嗎？ 如果你來到這里，非常感謝你::D

Answer 1

解決了！

感謝 Zack Jackson，我可以解決問題。

解決方案：

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