manfredsteyer / module-federation-plugin-example

268 stars 189 forks source link

Error: NG0203: inject() must be called from an injection context such as a constructor #51

Open ihrwebentwickler opened 2 months ago

ihrwebentwickler commented 2 months ago

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 }, ] };

arunaxxl commented 2 months ago

image issue resoved after updating native fedaraion