ctorParameters.map is not a function

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"

@ranakrunal9 cant be sure which package http://stackoverflow.com/questions/41107962/angular-in-memory-web-api-ctorparameters-map-is-not-a-function . So I asked for package.json — Suraj Rao, Jan 13 '17 at 11:10
ok @Suraj and @Darshan also its not necessary to use any other package to use `sessionStorage` you can use `sessionStorage` inside your component — ranakrunal9, Jan 13 '17 at 11:12
i mean you can directly use `sessionStorage.setItem('key', 'value');`, `var data = sessionStorage.getItem('key');` and `sessionStorage.clear();` methods inside your component function without importing anything. — ranakrunal9, Jan 13 '17 at 11:54
for ng2-webstorage, according to the link, you need to either upgrade angular versions to 2.2 or downgrade webstorage to ~1.4.2 — Suraj Rao, Jan 13 '17 at 11:57
also try to get angular-in-memory-web-api to 0.2.0 if it doesnt work — Suraj Rao, Jan 13 '17 at 11:57

ranakrunal9 · Accepted Answer · 2017-01-17T10:46:43.977

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;
  }
}

I will try to use this service. I used sessionStorage directly. If you put that as an answer then i will accept that here instead of service. — Darshan Puranik, Jan 17 '17 at 10:10

ctorParameters.map is not a function

1 Answers1