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

我的系统js.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 不是函数类型错误： 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/@angular/compiler/bundles/compiler.umd.js:14534:56) 在 CompileMetadataResolver.getTypeMetadata (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14499:28) 在评估 (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/@angular/compiler/bundles/compiler.umd.js:14311:46) 在 RuntimeCompiler._compileComponents (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:17063:49) 在 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

您可以直接使用sessionStorage的setItem、getItem和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;
  }
}