【发布时间】：2020-12-01 17:42:33
【问题描述】：
我正在尝试使用 Angular 和 NgRX 实现模块联合，但我遇到了问题，不知道如何解决。
问题是：当X应用懒加载一个模块从Y 使用 Firebase 的应用程序，角度无法识别火灾 身份验证提供程序。
我有 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 应用程序时，一切正常，我可以登录了。
但是，当我尝试在 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'],
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
【问题讨论】：
标签： javascript angular firebase module federation