ctorParameters.map不是函数

Question

我的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"
  }
}

我的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 { }

我的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);

我的应用程序可以在上面的代码中正常工作。 现在我想向应用程序添加会话存储，所以我使用了Ng2Webstorage（v1.5）。 我使用NPM安装了它。 尽快，我添加了以下代码：

除了app.module.ts

import {Ng2Webstorage}                        from 'ng2-webstorage';
...
...
@NgModule({
  imports:      [ 
      ...
     ,....
     , Ng2Webstorage
 ],
  ...
})

除了systemjs.config.js

map:{
......
......
'ng2-webstorage' : 'npm:ng2-webstorage'
}

packages:{
....
....
,
      'ng2-webstorage': {
        main: 'bundles/core.umd.js',
        defaultExtension: 'js'
      }
}

我开始收到以下错误。 我尝试删除Ng2Webstorage，但我的应用程序运行正常。

“（SystemJS）ctorParameters.map不是函数TypeError：ctorParameters.map不是ReflectionCapabilities.parameters（ http：// localhost：3000/node_modules/@angular/core/bundles/core.umd.js：1780： 49 ）在Reflector.parameters（ http：// localhost：3000/node_modules/@angular/core/bundles/core.umd.js：1922：48 ）在CompileMetadataResolver.getDependenciesMetadata（ http：// localhost：3000 / node_modules / @在eval的CompileMetadataResolver.getTypeMetadata（ http：// localhost：3000/node_modules/@angular/compiler/bundles/compiler.umd.js：14499：28 ）上的angular / compiler / bundles / compiler.umd.js：14534：56 ） （ http：// localhost：3000/node_modules/@angular/compiler/bundles/compiler.umd.js：14642：43 ）在Array.forEach（本机）在CompileMetadataResolver.getProvidersMetadata（ http：// localhost：3000 / node_modules / @ angular / compiler / bundles / compiler.umd.js： 14622 ：21 ）位于CompileMetadataResolver.getNgModuleMetadata（ http：// localhost：3000/node_modules/@angular/compiler/bundles/compiler.umd.js：14381：60 ）评估 （ http：// localhost：3000/node_modules/@angular/compiler/bundles/compiler.umd.js：14324：52 ）在Array.forEach（本机）在CompileMetadataResolver.getNgModuleMetadata（ http：// localhost：3000 / node_modules / @ RuntimeCompiler._compileComponents（ http：// localhost：3000/node_modules/@angular/compiler/bundles/compiler.umd.js：17063：49 ）上的@ angular / compiler / bundles / compiler.umd.js：14311：46 ） RuntimeCompiler._compileModuleAndComponents（ http：// localhost：3000/node_modules/@angular/compiler/bundles/compiler.umd.js：17001：39 ）位于RuntimeCompiler.compileModuleAsync（ http：// localhost：3000 / node_modules / @ angular / compiler /bundles/compiler.umd.js:16992:23 ）位于PlatformRef _._ bootstrapModuleWithZone（ http：// localhost：3000/node_modules/@angular/core/bundles/core.umd.js：6684：29 ）评估http：// localhost：3000 / app / main.js加载http：// localhost：3000 / app / main.js时出错 “

Answer 1

您可以直接使用setItem ， getItem和sessionStorage clear方法，如下所示：

要在会话存储中使用键token设置abdheajskke令牌值，请使用：

sessionStorage.setItem("token", "abdheajskke")

要从会话存储中获取token值，请使用：

sessionStorage.getItem("token")

或者，您可以创建自己的服务以使用sessionStorage 。 以下是您可以使用的简单最小服务的示例：

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