Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
ihrwebentwickler opened this issue Aug 28, 2024 · 1 comment

Comments

@ihrwebentwickler
Copy link

ihrwebentwickler commented Aug 28, 2024

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
Copy link

image
issue resoved after updating native fedaraion

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants