Skip to content

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

@ihrwebentwickler

Description

@ihrwebentwickler

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions