CODEWITHSUNDEEP
javascriptangulartypescript
Ole
Ole

Reputation: 46940

Getting a window property in Angular 13

Trying to do this in Angular 13:

private _stripe:StripeFactory = window['Stripe']

And it creates this error:

Element implicitly has an 'any' type because index expression is not of type 'number'

Any ideas on how to fix this?

I added:

"suppressImplicitAnyIndexErrors": true,

To tsconfig.json, but the linting errors still persist.

Upvotes: 0

Views: 10219

Answers (1)

Kevin McCann
Kevin McCann

Reputation: 551

Instead of

"suppressImplicitAnyIndexErrors": true,

in tscongfig.json, it's recommended to use an @ts-ignore comment on the preceding line in the .ts file:

// @ts-ignore
private _stripe:StripeFactory = window['Stripe']

But there is definitely a more 'Angular' way to do what you are trying to do, but I'm not quite sure what that is. Just extrapolating from the name of the type, I'd have a StripeFactory in the StripeService that calls a getStripe() method which has access to your Stripe configuration and key, using that to grab the global Stripe object. You'll have to load Stripe separately and inject the StripeService into the components that need it.

See this dev post for this Stripe specific solution in detail.

Or if you want to stick with window, you can add it to your provider array in the module:

providers: [
  { provide: Window, useValue: window }
]

Then you can inject it directly into your service:

constructor(private window: Window) {
  // ....do whatever you're gonna do
}

Upvotes: 7

Related Questions