This error has already been discussed, but is it really still present in the current Native Federation version? I use Okta modules and would like to use the functionality for the remote app. the remote-app is not shown and ends with this error.
skip: [
'rxjs/ajax',
'rxjs/fetch',
'rxjs/testing',
'rxjs/webSocket'
// Add further packages you don't need at runtime
]
});
config of the shell app with okta-integration is:
import { APP_INITIALIZER, ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideRouter } from '@angular/router';
import { APP_ROUTES} from './app.routes';
import { HttpBackend, HttpClient, provideHttpClient } from '@angular/common/http';
import { OktaAuthConfigService, OktaAuthModule } from '@okta/okta-angular';
import { OktaAuth } from '@okta/okta-auth-js';
import { tap, take } from 'rxjs';
This error has already been discussed, but is it really still present in the current Native Federation version? I use Okta modules and would like to use the functionality for the remote app. the remote-app is not shown and ends with this error.
package.json is: { "name": "mf-demo", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "start:all": "concurrently \"ng serve assurance\" \"ng serve shell\"", "build": "ng build", "watch": "ng build --watch --configuration development", "test": "ng test" }, "private": true, "dependencies": { "@angular-architects/native-federation": "^18.1.3", "@angular/animations": "^18.2.1", "@angular/common": "^18.2.1", "@angular/compiler": "^18.2.1", "@angular/core": "^18.2.1", "@angular/forms": "^18.2.1", "@angular/platform-browser": "^18.2.1", "@angular/platform-browser-dynamic": "^18.2.1", "@angular/router": "^18.2.1", "@okta/okta-angular": "^6.4.0", "@okta/okta-auth-js": "^7.7.1", "es-module-shims": "^1.10.0", "rxjs": "~7.8.1", "tslib": "^2.7.0", "zone.js": "~0.14.10" }, "devDependencies": { "@angular-devkit/build-angular": "^18.2.1", "@angular/cli": "~18.2.1", "@angular/compiler-cli": "^18.2.1", "@types/jasmine": "~5.1.4", "concurrently": "^8.2.2", "jasmine-core": "~5.2.0", "karma": "~6.4.4", "karma-chrome-launcher": "~3.2.0", "karma-coverage": "~2.2.1", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.1.0", "ng-packagr": "^18.2.1", "typescript": "~5.5.4" } }
Content of remote-app federation.config: const { withNativeFederation, shareAll } = require('@angular-architects/native-federation/config');
module.exports = withNativeFederation({
name: 'assurance',
exposes: { './Component': './domains/assurance/src/app/app.component.ts', },
shared: { ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }), },
skip: [ 'rxjs/ajax', 'rxjs/fetch', 'rxjs/testing', 'rxjs/webSocket' // Add further packages you don't need at runtime ] });
content of federaton.config of shell: const { withNativeFederation, shareAll } = require('@angular-architects/native-federation/config');
module.exports = withNativeFederation({
shared: { ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }), },
skip: [ 'rxjs/ajax', 'rxjs/fetch', 'rxjs/testing', 'rxjs/webSocket' // Add further packages you don't need at runtime ]
});
config of the shell app with okta-integration is: import { APP_INITIALIZER, ApplicationConfig, importProvidersFrom } from '@angular/core'; import { provideRouter } from '@angular/router';
import { APP_ROUTES} from './app.routes'; import { HttpBackend, HttpClient, provideHttpClient } from '@angular/common/http'; import { OktaAuthConfigService, OktaAuthModule } from '@okta/okta-angular'; import { OktaAuth } from '@okta/okta-auth-js'; import { tap, take } from 'rxjs';
function configInitializer(httpBackend: HttpBackend, configService: OktaAuthConfigService): () => void { return () => new HttpClient(httpBackend) .get('./assets/config.json') .pipe( tap((authConfig: any) => configService.setConfig({ oktaAuth: new OktaAuth({ ...authConfig, redirectUri:
${window.location.origin}/login/callback
, scopes: ['openid', 'offline_access', 'profile'] }) })), take(1) ); }export const appConfig: ApplicationConfig = { providers: [ importProvidersFrom( OktaAuthModule ), provideRouter(APP_ROUTES), provideHttpClient(), { provide: APP_INITIALIZER, useFactory: configInitializer, deps: [HttpBackend, OktaAuthConfigService], multi: true }, ] };