"ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(n)[ET -> ET -> ET]"

Questions
1

I’m encountering the following error during runtime:

main.js:1 ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(n)[ET -> ET -> ET]: 
  NullInjectorError: No provider for ET!
NullInjectorError: R3InjectorError(n)[ET -> ET -> ET]: 
  NullInjectorError: No provider for ET!

I’m following the configuration steps provided in okta-angular and below is my app.module.ts:

import { OktaAuthModule, OktaConfig, OKTA_CONFIG } from '@okta/okta-angular';
import { OktaAuth } from '@okta/okta-auth-js';

const oktaAuth = new OktaAuth(environment.myConfig);
const moduleConfig: OktaConfig = { oktaAuth };

@NgModule({
    declarations: [
    ],
    imports: [
        OktaAuthModule.forRoot(moduleConfig),
    ],
    providers: [
    ],
    bootstrap: [
        AppComponent
    ],
    schemas: [
    ]
})
export class AppModule { }

"@angular/core": "^15.2.9",
"@ng-bootstrap/ng-bootstrap": "^6.0.0",
"@okta/okta-angular": "^6.2.0",
"@okta/okta-auth-js": "^7.2.0",
2

Hey there @spaghettiboi22,

On first glance, your configuration looks correct, but let’s double-check some things and pare it down just to be safe.

Would you mind changing your code not to use moduleConfig and instead pass the OktaAuth object directly?

const oktaAuth = new OktaAuth(environment.myConfig);

@NgModule({
  imports: [
    OktaAuthModule.forRoot({oktaAuth});
  ]
})

To make sure, are you seeing this injector error before consuming Okta anywhere else within the application? Or are you using OktaAuth anywhere?

1 Like
3

Hi, I gave this a try, but I’m having the same error.

4

To verify, are you using OktaAuth within your application? And can you share your config? (feel free to stub in a fake clientId or any sensitive info)

6

The config environment.ts:

const customSessionStorageProvider = {
	getItem: function (key) {
		return sessionStorage.getItem(key);
	},
	setItem: function (key, val) {
		sessionStorage.setItem(key, val);
	},
	removeItem: function (key) {
		sessionStorage.removeItem(key);
	}
}

export const environment = {
	oktaConfig: {
		baseUrl: 'https://oktasso.company.com',
		issuer: 'https://oktasso.company.com/oauth2/default',
		redirectUri: 'http://localhost:4201/implicit/callback',
		clientId: 'someClientId',
		pkce: false,
		storageManager: {
			token: {
				storageProvider: customSessionStorageProvider
			},
			transaction: {
				storageProvider: customSessionStorageProvider
			},
			cache: {
				storageProvider: customSessionStorageProvider
			},
		}
	}
}

I am using OktaAuth in a few components but I am unable to even get a debugging point running in any of the entry point files (main.ts, app.module.ts, app.component.ts.).

For some context, my project has 3 parts (A, B, C). A and B run on different ports, while C is just a shared library of services that is utilized across the project. I have OKTA setup and working on project A following the same documentation, but am having issues setting it up in project B. Since A and B have their own respective app.module files, I have OktaAuthModule added in each project’s module files, providing the singleton service within it’s own application. Apart from the config and some component constructor calls, projects A and B have an identical setup for OktaAuth, but it is not working in B. Thank you.

7

Thanks for sharing and for the context of your setup. Do you see this problem when you run project B alone? Or only when you run both project A and project B at the same time?

(since it works in project A, you are injecting the OktaAuth instance with the injection token correctly, so it sounds like a different issue :smile: )