ctorParameters.map is not a function - angularjs

Question

My package.json
{
"name": "angular-quickstart",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
"lite": "lite-server",
"tsc": "tsc",
"tsc:w": "tsc -w"
},
"licenses": [
{
"type": "MIT",
"url": "https://github.com/angular/angular.io/blob/master/LICENSE"
}
],
"dependencies": {
"#angular/common": "^2.1.1",
"#angular/compiler": "^2.1.1",
"#angular/core": "^2.1.1",
"#angular/forms": "^2.1.1",
"#angular/http": "^2.1.1",
"#angular/platform-browser": "^2.1.1",
"#angular/platform-browser-dynamic": "^2.1.1",
"#angular/router": "^3.1.1",
"#angular/upgrade": "^2.1.1",
"angular-in-memory-web-api": "^0.1.13",
"bootstrap": "^3.3.7",
"chart.js": "^2.4.0",
"core-js": "^2.4.1",
"ng2-charts": "^1.4.4",
"ng2-webstorage": "^1.5.0",
"reflect-metadata": "^0.1.8",
"rxjs": "^5.0.0-rc.4",
"systemjs": "0.19.39",
"zone.js": "^0.7.2"
},
"devDependencies": {
"#types/core-js": "^0.9.34",
"#types/node": "^6.0.45",
"concurrently": "^3.0.0",
"lite-server": "^2.2.2",
"typescript": "^2.0.3"
}
}
My app.module.ts
import { NgModule } from '#angular/core';
import {BrowserModule} from '#angular/platform-browser';
import {FormsModule, ReactiveFormsModule} from '#angular/forms';
import {HttpModule} from '#angular/http';
import {routing} from './app.routing';
import {ChartsModule} from 'ng2-charts/ng2-charts';
import {HttpHelper} from './shared/http-helper'
import {SpinnerComponent} from './misc/spinner/spinner.component';
import {PaginationComponent} from './misc/pagination/pagination.component';
import { AppComponent } from './app.component';
import {NavbarComponent} from './navbar/navbar.component';
import {AuthenticationComponent} from './components/authentication/authentication.component';
> import {HomeComponent} from
> './home/home.component'; import {HotelsComponent}
> from './components/hotel/hotels.component'; import {NewHotelComponent}
> from './components/hotel/new-hotel.component'
>
> import {AuthenticationService} from
> './components/authentication/authentication.service'; import
> {HotelsService} from
> './components/hotel/hotels.service';
>
> #NgModule({ imports: [
> BrowserModule
> , FormsModule
> , ReactiveFormsModule
> , HttpModule
> , routing
> , ChartsModule
> , Ng2Webstorage
> ], declarations: [
> AppComponent
> , NavbarComponent
> , AuthenticationComponent
> , HomeComponent
> , HotelsComponent
> , NewHotelComponent
> , SpinnerComponent
> , PaginationComponent
> ], providers :[
> HttpHelper
> , AuthenticationService
> , HotelsService], bootstrap: [ AppComponent ] }) export class AppModule { }
My systemjs.config.js
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'#angular/core': 'npm:#angular/core/bundles/core.umd.js',
'#angular/common': 'npm:#angular/common/bundles/common.umd.js',
'#angular/compiler': 'npm:#angular/compiler/bundles/compiler.umd.js',
'#angular/platform-browser': 'npm:#angular/platform-browser/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'#angular/http': 'npm:#angular/http/bundles/http.umd.js',
'#angular/router': 'npm:#angular/router/bundles/router.umd.js',
'#angular/forms': 'npm:#angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
'ng2-charts' : 'npm:ng2-charts',
'underscore' : 'npm:underscore',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
},
'ng2-charts':{
defaultExtension: 'js'
},
'underscore':{
defaultExtension: 'js'
}
}
});
})(this);
My application works fine with above code. Now I want add session storage to app so i used Ng2Webstorage (v1.5). I installed it using NPM. As soon as, I added following code:
Addition to app.module.ts
import {Ng2Webstorage} from 'ng2-webstorage';
...
...
#NgModule({
imports: [
...
,....
, Ng2Webstorage
],
...
})
Addition to systemjs.config.js
map:{
......
......
'ng2-webstorage' : 'npm:ng2-webstorage'
}
packages:{
....
....
,
'ng2-webstorage': {
main: 'bundles/core.umd.js',
defaultExtension: 'js'
}
}
I started receiving following error. I tried removing Ng2Webstorage and my app works fine.
"(SystemJS) ctorParameters.map is not a function TypeError:
ctorParameters.map is not a function
at ReflectionCapabilities.parameters (http://localhost:3000/node_modules/#angular/core/bundles/core.umd.js:1780:49)
at Reflector.parameters (http://localhost:3000/node_modules/#angular/core/bundles/core.umd.js:1922:48)
at CompileMetadataResolver.getDependenciesMetadata (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:14534:56)
at CompileMetadataResolver.getTypeMetadata (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:14499:28)
at eval (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:14642:43)
at Array.forEach (native)
at CompileMetadataResolver.getProvidersMetadata (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:14622:21)
at CompileMetadataResolver.getNgModuleMetadata (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:14381:60)
at eval (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:14324:52)
at Array.forEach (native)
at CompileMetadataResolver.getNgModuleMetadata (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:14311:46)
at RuntimeCompiler._compileComponents (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:17063:49)
at RuntimeCompiler._compileModuleAndComponents (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:17001:39)
at RuntimeCompiler.compileModuleAsync (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:16992:23)
at PlatformRef_._bootstrapModuleWithZone (http://localhost:3000/node_modules/#angular/core/bundles/core.umd.js:6684:29)
Evaluating http://localhost:3000/app/main.js Error loading
http://localhost:3000/app/main.js"

Answer 1

You can directly use setItem, getItem and clear methods of sessionStorage as below :
To set abdheajskke token value with key token in session storage use :
sessionStorage.setItem("token", "abdheajskke")
To get token value from session storage use :
sessionStorage.getItem("token")
Or you can create your own service to use sessionStorage. Below is the example of simple minimal service which you can use :
import { Injectable } from '#angular/core';
#Injectable()
export class StorageService {
public setItem(key: string, data: any) {
sessionStorage.setItem(key, JSON.stringify(data));
}
public getItem(key: string) {
if (!!sessionStorage.getItem(key)) {
return sessionStorage.getItem(JSON.parse(key));
} else {
return false;
}
}
public clear() {
sessionStorage.clear();
return true;
}
public removeItem(key: string) {
sessionStorage.removeItem(key);
return true;
}
}