Functions are missing from localForage after updating Angular to latest version

[blahDL]

Which @angular/* package(s) are the source of the bug?

compiler, Don't known / other

Is this a regression?

Yes

Description

I have an Angular 17.1.2 application that is using localForage without any issues.

Today I updated the version of Angular to 17.3.5 (no other changes) and now when I call config on localForage it is throwing Uncaught TypeError: localForage.config is not a function. The package version for localForage is still exactly the same so it appears as though the Angular update has caused the issue.

As an alternative I tried calling createInstance and using that instance in my code but it is also throwing the same exception.

The functionality of localForage still works as expected if I remove the call to config, it just has the default configuration instead of the customised name and storeName which I was setting previously.

I created a stack blitz to determine if it was an issue in my code and it also throws the same exceptions. The stack blitz is using Angular 17.2.0 so it appears that the issue originates between 17.1.2 and 17.2.0.

https://stackblitz.com/edit/stackblitz-starters-maotxh?file=src%2Fmain.ts

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/stackblitz-starters-maotxh?file=src%2Fmain.ts

Please provide the exception or error you saw

Uncaught TypeError: localForage.config is not a function
and
Uncaught TypeError: localForage.createInstance is not a function

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 17.3.5
Node: 20.12.2
Package Manager: npm 10.5.0
OS: win32 x64

Angular: 17.3.5
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, localize, material, material-date-fns-adapter
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1703.5
@angular-devkit/build-angular   17.3.5
@angular-devkit/core            12.2.18
@angular-devkit/schematics      12.2.18
@schematics/angular             17.3.5
rxjs                            7.5.7
typescript                      5.3.3
zone.js                         0.14.3

Anything else?

No response

[alan-agius4]

This is due to the namespace import, use a default import instead.

- import * as localforage from 'localforage';
+ import localforage from 'localforage';

More information about this can be found evanw/esbuild#532

[blahDL]

Thanks for the quick response!

It's good to see that JavaScript bundlers/compliers are trying to handle code consistently

Initially when making the update to my application I was getting an error telling me to enable allowSyntheticDefaultImports so I thought I would check how my tsconfig.json was different to what is created for a new 17.3.5 application and found that newly created applications have esModuleInterop set to true (which also enables allowSyntheticDefaultImports) whereas mine did not.

After reading https://www.typescriptlang.org/tsconfig/#esModuleInterop there is a note at the bottom which I think helps explain the issue I had encountered:

Note: The namespace import import * as fs from "fs" only accounts for properties which are owned (basically properties set on the object and not via the prototype chain) on the imported object. If the module you’re importing defines its API using inherited properties, you need to use the default import form (import fs from "fs"), or disable esModuleInterop.

The config and createInstance methods of localForage must only exist in the prototype and are not owned methods which is why setItem and getItem (which I assume are owned methods) were working and they were not.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}