How do I use this module in Angular 2? Any examples?
So far I installed the module and imported in the Angular 2 component.
Join Stack Overflow to learn, share knowledge, and build your career.
How do I use this module in Angular 2? Any examples?
So far I installed the module and imported in the Angular 2 component.
Import it and add it to bootstrap()
bootstrap(AppComponent, [OtherProvider, LocalStorage]);
Inject it into the component, directive, or service where you want to use it.
export class SomeComponent {
constructor(private ls:LocalStorage) {}
clickHandler() {
this.ls.set('someKey', 'someValue');
}
otherClickHandler() {
console.log(this.ls.get('someKey'); // should print 'someValue'
}
}
local_storage:1 Uncaught SyntaxError: Unexpected token < angular2-polyfills.js:1243 Uncaught SyntaxError: Unexpected token < Evaluating http://localhost:3000/angular2-local-storage/local_storage Error loading http://localhost:3000/app/main.js
– slowydown
Feb 10 '16 at 19:31
LocalStorage
. I can't help you with this because I use Dart and have no knowledge about TS imports and similar. There are lots of questions about similar error messages already "Unexpected token <". If you don't find anything that fits, I guess it's best to create a new question for this specific error.
– Günter Zöchbauer
Feb 10 '16 at 19:35
I have faced same issue and after debugging code I found the solution.
Issue is with npm package creation not in the source code.
When you run "npm install angular2-localStorage", it download package in node_module folder but in web deployment, that folder goes outside of node_module. Because of this, website can not find the package hence the error you get in browser.
I have copied those 2 files "LocalStorage.ts" and "LocalStorageEmitter.ts" and referred directly in my code.
It works like a charm!
npm install --save angular2-localStorage
– superjos
Apr 15 '16 at 0:46
What are you using for your developement enviroment?
If you are using SystemJS like the angular2 tutorials, you'll need to add the following to your systemjs.conf.js file:
in the map area you'll need to add:
'angular2-localstorage': 'node_modules/angular2-localstorage'
For example:
var map = {
'app': 'app', // 'dist',
'@angular': 'node_modules/@angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'rxjs': 'node_modules/rxjs',
'angular2-localstorage': 'node_modules/angular2-localstorage'
};
Depending on your setup, you may also need to add:
'angular2-localstorage': {
defaultExtension: "js"
}
to your "packages" area.
Then, in your main bootloader you'll want to import it:
import {LocalStorageService, LocalStorageSubscriber} from 'angular2-localstorage/LocalStorageEmitter';
And update the bootloader and subscribe:
for example:
var appPromise = bootstrap(myapp, [ROUTER_PROVIDERS, LocalStorageService]);
LocalStorageSubscriber(appPromise);
Then... to actually use it, you'll do something like this within a class:
Import it:
import {LocalStorage, SessionStorage} from "angular2-localstorage/WebStorage";
Then, within the class:
@LocalStorage() public foo:string = ''; // this will initialize to empty string, you might want something different.
this.foo = this.foo + "Changed"; //foo variable and '/foo' localstorage entry will change any time the variable changes. *note, but not the other way around
http://localhost:4200/node_modules/angular2-localstorage/LocalStorageEmitter
Tried setting the transpiler option to typescript, does not work for me. Tried code above, does not work either for me.
– August
Jun 22 '16 at 12:12
It's dependent upon your dev. environment, specifically the tools being used to compile your typescript. If you are using SystemJS, you need to map to it in your config file. For info on how this works, here is a link to the config of the Angular 2's official "Tour of Heroes" quick-start which uses SystemJS.
map: {
'angular2-localstorage': 'node_modules/angular2-localstorage'
}
There seems to be a bug with this library. I am using the angular-cli to generate an Angular 2 application. As a sanity check, I tried the angular2-cookie package. Note that the instructions on how to install and use this package with Angular 2 is outdated.
Step 1. Install the package.
npm install angular2-cookie --save
Step 2. modify SystemJS settings in system-config.ts
const map: any = {
'angular2-cookie': 'vendor/angular2-cookie'
}
const packages: any = {
'angular2-cookie' : {
format: 'cjs',
defaultExtension: 'js',
main: 'core.js'
}
}
Step 3. modify the angular-cli build script angular-cli-build.js
module.exports = function(defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'zone.js/dist/**/*.+(js|js.map)',
'es6-shim/es6-shim.js',
'reflect-metadata/**/*.+(ts|js|js.map)',
'rxjs/**/*.+(js|js.map)',
'@angular/**/*.+(js|js.map)'
'angular2-cookie/**/*.+(ts|js|js.map)'
]
});
};
Step 4. Provide the service in main.ts
import { CookieService } from 'angular2-cookie/core';
...
bootstrap(AppComponent, [
HTTP_PROVIDERS,
CookieService
])
.catch( (err:any) => console.error(err));
Step 5. You can load your application with ng serve
, but after the 4 steps above, you will have to kill it (e.g. ctrl-c) and restart it ng serve
.
Now, if you repeat these 5 steps with angular2-localstorage
, it will NOT work.
Step 1. install
npm install --save angular2-localstorage
Step 2. system-config.ts
const map: any = {
'angular2-cookie': 'vendor/angular2-cookie',
'angular2-localstorage': 'vendor/angular2-localstorage'
};
/** User packages configuration. */
const packages: any = {
'angular2-localstorage': {
format: 'cjs',
defaultExtension: 'ts'
},
'angular2-cookie' : {
format: 'cjs',
defaultExtension: 'js',
main: 'core.js'
}
}
Step 3. angular-cli-build.js
module.exports = function(defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'zone.js/dist/**/*.+(js|js.map)',
'es6-shim/es6-shim.js',
'reflect-metadata/**/*.+(ts|js|js.map)',
'rxjs/**/*.+(js|js.map)',
'@angular/**/*.+(js|js.map)'
'angular2-cookie/**/*.+(ts|js|js.map)',
'angular2-localstorage/**/*.+(ts|js|js.map)'
]
});
};
Step 4. main.ts
import { CookieService } from 'angular2-cookie/core';
import { LocalStorageService } from 'angular2-localstorage/LocalStorageEmitter';
...
bootstrap(AppComponent, [
HTTP_PROVIDERS,
CookieService,
LocalStorageService
])
.catch( (err:any) => console.error(err));
Step 5. kill and restart ng-serve
You will observe something like the following.
zone.js:461 Unhandled Promise rejection: (SystemJS) SyntaxError: Unexpected token import at Object.eval (http://localhost:4200/main.js:8:29) at eval (http://localhost:4200/main.js:27:4) at eval (http://localhost:4200/main.js:28:3) Evaluating http://localhost:4200/vendor/angular2-localstorage/LocalStorageEmitter.ts Evaluating http://localhost:4200/main.js Error loading http://localhost:4200/main.js ; Zone: ; Task: Promise.then ; Value: Error: (SystemJS) SyntaxError: Unexpected token import(…)
If you try to change system-config.ts
as one of the users advised like the following.
'angular2-localstorage': {
defaultExtension: "js"
}
Then, you will see the following.
zone.js:101 GET http://localhost:4200/vendor/angular2-localstorage/LocalStorageEmitter.js 404 (Not Found)
It doesn't matter if you add or remove format: 'cjs'
, you will still get a 404.
Of course, one difference is that angular2-cookie
is written in JavaScript
and angular2-localstorage
is written in TypeScript
. But still, the ideas should be the same.
It seems to me the console complains about the import
statement.
This ticket suggest you need to build the package (because there is a bug with npm), but the user still said even that doesn't work.
I don't think there's anything we can do at this point about this package (as users).
Oh, on the project's website.
This project is not maintained. Please consider taking it over. More information at https://github.com/open-source-chest/take-it-over.