Typescript warnings "export 'StorageService' was not found in 'ngx-webstorage-service'

[stnor]

I'm getting these warnings anywhere I use the Storage Service.

 ｢wdm｣: Compiling...
⚠ ｢wdm｣:    4361 modules

WARNING in ./app/routes/quizzes/quiz2/keyboard/screen-keyboard.component.ts 36:234-248
"export 'StorageService' was not found in 'ngx-webstorage-service'

WARNING in ./app/routes/quizzes/quiz2/keyboard/screen-keyboard.component.ts 36:276-290
"export 'StorageService' was not found in 'ngx-webstorage-service'

WARNING in ./app/routes/quizzes/quiz2/student-quiz.service.ts 43:165-179
"export 'StorageService' was not found in 'ngx-webstorage-service'

WARNING in ./app/routes/quizzes/quiz2/student-quiz.service.ts 43:207-221
"export 'StorageService' was not found in 'ngx-webstorage-service'
ℹ ｢wdm｣: Compiled with warnings.

Any ideas?

I'm on babel/webpack (not using anguar-cli): "@angular/common": "9.1.6", "@babel/core": "7.9.0", "babel-plugin-transform-typescript-metadata": "0.3.0", "typescript": "3.8.3", "webpack": "4.16.5", "ngx-webstorage-service": "4.1.0",

[stnor]

Related: https://github.com/babel/babel-loader/issues/603 ?

[dscheerens]

I'm not sure why you're getting that error. The library is built using ng-packagr, which should produce multiple distribution bundles to maximize compatibility with different build tools.

Could you perhaps try the following: build the library from the master branch (npm i + npm run build), and then manually copying the output from build/dist to the node_modules/ngx-webstorage-service directory of your application? The master branch contains some (unreleased) dependency updates, which includes an update for ng-packagr. Hopefully that solves your problem. If it does I can make a new release.

[stnor]

I played around with your source, bumping deps and changing the export chain, but I couldn't get anything to remove the warning. However, if I import WebstorageService in my project, there is no warning... Any ideas? I guess that's a good enough workaround for now...

[dscheerens]

The difference between StorageService and WebStorageService is that the first is an interface while the second is a class. Perhaps the new type imports/exports from TypeScript 3.8 offer a solution?

import type { StorageService } from 'ngx-webstorage-service';

If that doesn't work then importing WebStorageService is a reasonable workaround. Alternatively you could switch to using the Angular CLI. I am not sure what the reason is why you chose a custom build setup. If your reason was to provide a custom webpack config, then you could consider using the Angular CLI together with something like ngx-build-plus.

[stnor]

The "import type"-syntax seems to do the trick, thanks!

The reason that I am using a custom build is that it is a very very large project (100k+ LoC) with five angular apps of which two are running ng9 (migration done), one is a hybrid 1.7/9 and two are 1.7 that all share common components and webpack build with fairy advanced stuff that is not easily ported to cli. And there is sooo much code... The project turns ten years (!) old next year... It's a public SaaS that started out as server side rendered java w/ freemarker + jquery -> backbonejs -> ng1 -> ng9.

It's good fun migrating it to ng9 though. Hoping to get Ivy and AOT going at the end of the year when it's all migrated... hopefully ;)

[dscheerens]

Oh, that sounds like challenging project to maintain.

Glad to hear the import type did the trick! Good luck with the remainder of the migrations :)