bohoffi / ngx-localstorage Goto Github PK

Migrate LocalStorageDirective to Standalone API and remove the module

Describe the bug
ERROR in node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.
node_modules/ngx-localstorage/node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.

To Reproduce
Steps to reproduce the behavior:

1. Generate new app using CLI 6.1.0
2. Install this package
3. npm run start

Expected behavior
No error

Describe the bug
Incompatible peer dependency to "rxjs" (requires "~7.5.0", would install "7.8.0")

To Reproduce
Steps to reproduce the behavior:

1. ng new AngularProjectV15
2. npm i ngx-localstorage
3. See error

Expected behavior
Compatible peer dependency to [email protected]

Version information (please complete the following information):

• Module 5.0.0
• Angular 15.2.6

Hi,

I've an active warning during Angular CLI (1.7.1) production build

This issue come instead of warnings that was on ngx-localstorage version 1.2.0

Processing legacy "View Engine" libraries:

• ngx-localstorage [es2015/esm2015] (git+https://github.com/bohoffi/ngx-localstorage.git)
  Encourage the library authors to publish an Ivy distribution.

Consider yourself encouraged :)

I am currently running angular 12.0.1.

When I attempt to install ngx-localstorage using either the command "ng add ngx-localstorage" or "ng add ngx-localstorage --force" I receive the error message pasted below.

Is the fix just to submit a version of ngx-localstorage to npm that has a dependency for Angular 12 instead of 10? And assuming this works, would you need to do the same thing for Angular 11?

The package [email protected] will be installed and executed.
Would you like to proceed? Yes
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/core
npm ERR! peer @angular/core@"12.0.1" from @angular/[email protected]
npm ERR! node_modules/@angular/animations
npm ERR! peerOptional @angular/animations@"12.0.1" from @angular/[email protected]
npm ERR! node_modules/@angular/platform-browser
npm ERR! peer @angular/platform-browser@"12.0.1" from @angular/[email protected]
npm ERR! node_modules/@angular/forms
npm ERR! @angular/forms@"~12.0.1" from the root project
npm ERR! 3 more (@angular/platform-browser-dynamic, @angular/router, the root project)
npm ERR! @angular/animations@"~12.0.1" from the root project
npm ERR! peer @angular/core@"12.0.1" from @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR! peer @angular/common@"12.0.1" from @angular/[email protected]
npm ERR! node_modules/@angular/forms
npm ERR! @angular/forms@"~12.0.1" from the root project
npm ERR! peer @angular/common@"12.0.1" from @angular/[email protected]
npm ERR! node_modules/@angular/platform-browser
npm ERR! peer @angular/platform-browser@"12.0.1" from @angular/[email protected]
npm ERR! node_modules/@angular/forms
npm ERR! @angular/forms@"~12.0.1" from the root project
npm ERR! 3 more (@angular/platform-browser-dynamic, @angular/router, the root project)
npm ERR! 4 more (@angular/platform-browser-dynamic, @angular/router, ...)
npm ERR! 7 more (@angular/forms, @angular/platform-browser, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/core@"10.2.5" from @angular/[email protected]
npm ERR! node_modules/ngx-localstorage/node_modules/@angular/platform-browser-dynamic
npm ERR! @angular/platform-browser-dynamic@"^10.1.4" from [email protected]
npm ERR! node_modules/ngx-localstorage
npm ERR! ngx-localstorage@"3.3.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!

module code:
.... @NgModule({ declarations: [JobComponent], imports: [ NgxLocalStorageModule.forRoot({prefix: 'demo'}) ], exports: [JobComponent] }) ....

component code:
`
....
ngOnInit() {
this.lss.set("myjob", 'IT');
console.log(this.lss.count());
this.boundText = "eee";
}

@ngxLocalStorage({ key: 'txt1' })
boundText: string;
....`

in my chrome browser local storage have two value with no prefix，（myjob：IT，txt1：eee），
but how an I get two value with prefix(demo) that I declare in my module? （demo_myjob：IT，demo_txt1：eee）

I'm always frustrated when npm gives me a warning :) Like the one you get when ngx-localstorage is used with angular 7:

npm WARN [email protected] requires a peer of @angular/common@^6.0.0-rc.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/core@^6.0.0-rc.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself.

Please update peer dependencies to @angular/common@^7.0.0 and @angular/core@^7.0.0.

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because we are using your CI build statuses to figure out when to notify you about breaking changes.

Since we did not receive a CI status on the greenkeeper/initial branch, we assume that you still need to configure it.

If you have already set up a CI for this repository, you might need to check your configuration. Make sure it will run on all new branches. If you don’t want it to run on every branch, you can whitelist branches starting with greenkeeper/.

We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

The latest release is not in the NPM repository

Is your feature request related to a problem? Please describe.
Currently the directive is built onto a load of manual configuration like forEvent (when to write control value to storage) or valuePath (describing the path to write the value on/in the control) which is kinda overload when used with form controls.
Utilizing ControlValueAccessor would handle sync without the hassle of manual configuration. Doing this would improve DX when used with custom controls.

Describe the solution you'd like
Implementing the directive utilizing ControlValueAccessor to hand of the manual part to the framework while leaving the configurative part (key, prefix) to the directive.

Additional context

• ngx-localstorage@^5.0.0
• @angular/core@^15.0.0

Hello,

I've problem with my project production install 'ng bluild --prod'.

Here is the error:

Have any ideas?

Describe the bug
Simple test run of the ngxLocalStorage directive from https://bohoffi.github.io/ngx-localstorage/ -> Directive:
<input type="text" id="txt1" ngxLocalStorage lsPrefix="demo" lsInitFromStorage="true" lsEvent="input" [lsValuePath]="['value']"/>

Just pasted into a component which in defined in a module called ParthnerSharedModule

Can't bind to 'lsValuePath' since it isn't a known property of 'input'.

To Reproduce
Steps to reproduce the behavior:

1. Add the module to app.module.ts.
2. Use the above from the samples ...
3. See error

Expected behavior
I'm really lost or really stupid here ...

The errors goes away if I import the module in my sub module ...

But when accessing the site I get Error: NgxLocalStorageModule is already loaded. Import it in the AppModule only

So ...

I use the LocalStorageService in one of my services which works fine.

I most be missing something here ... I can't be the first one doing to ... Please let me know if you need more information.

Is your feature request related to a problem? Please describe.
Some may like to save/restore values to/from localstorage without worrying about the (de)serialization and let the library do it for them.

Describe the solution you'd like
Provide a default (de)serialization using JSON.stringify()/JSON.parse() which will be used when the (de)serializer parameter is omitted.

Additional context
Request origin: #23

Please listen to 'storage' events on the window object to detect changes made in other browser tabs

Update dependencies like Angular and nx to the latest versions.

Hi,

I've an active warning during Angular CLI (1.5.0) production build

Can't resolve all parameters for LocalStorageService in /Users/vitalyantonenko/AngularProjects/c2-gui/node_modules/ngx-localstorage/src/lib/services/local-storage.service.d.ts: (?). This will become an error in Angular v6.x
Warning: Can't resolve all parameters for LocalStorageService in .../node_modules/ngx-localstorage/src/lib/services/local-storage.service.d.ts: (?). This will become an error in Angular v6.x

I hope you will fix it till Angular 6.x

Describe the solution you'd like
The goal is to simplify the initial integration of the library into other angular projects using ng add.

Running schematics ./projects/schematics/src/collection.json:ng-add from the root to test.

Hi All,

For some reason, I'm not able to make the stream event work. Please see below the snippet :

`
this.es.stream.subscribe(e => {
console.log("events: ", e);
});

setTimeout(() => {
  this._storageService.set("demo-key-2", {
    id: 1,
    name: "John Doe"
  });
}, 5000);

`

Currently only the service is covered by tests. The following parts should be covered as well:

• directive
• tokens

Is there any way I can do
this.localStorageService.set('myKey',{myValue: 1 })?

Goal of this FR is to update all dependencies to their latest versions.

Describe the solution you'd like
Re-init the workspace with the latest NX tools to move away from using Karma as test runner and move forward to using Jest.

Additional context
Part of the re-init will be:

• switching version schema to align with used Angular major
  • means: version after re-init will by 12.x
  • 3.x version will be preserved in a 3.x branch
• switching test runner from Karma to Jest
• increasing compiler strictness by using strict settings

As Observables are some kind of state of the art using Angular the Promise based service should be replaced with an Observable based one.

Promises will still be usable as Observables can be translated into promises using .ToPromise().

I am developing an application where access to localStorage is mandatory. In case the user has blocked third-party cookies, the screen shows the steps to enable them. Currently, I'm getting an error as Uncaught DOMException: Failed to read the 'sessionStorage' property from 'Window': Access is denied for this document. during application bootstrap. Due to this, the user cannot proceed further and sees a blank screen which is not a good UX.

Describe the solution you'd like

1. The library should handle errors gracefully when the user has blocked third-party cookies.
2. Expose a method to check if localStorage is supported or not.

I am using the latest version of Angular 12 with this package. For regular web implementation, it works great but when trying to do Server Rendering with Angular Universal, I am getting the next error:

/Users/*/Documents/Development/*/*/*/dist/web/server/main.js:203702
    storage: localStorage,
             ^

ReferenceError: localStorage is not defined

any idea why is this happening?

Thanks

In this case:

It will be:
this.remove(key, prefix);

Thanks

Describe the bug

https://stackblitz.com/edit/angular-ivy-hdgjx6?file=src%2Fapp%2Fsub-module%2Fsub-module.module.ts

To Reproduce
Steps to reproduce the behavior:

1. Go to https://angular-ivy-hdgjx6.stackblitz.io/sub
2. Type something into the bottom textbox ... the value changes. Value: {{ textModel }}
3. Reload the page. textbox is being set with the previously value, but the property bound to the input field is only getting updated when typing something.

Expected behavior
I would expect the property in the component to be updated with the value set from the directives.