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

我的应用程序可以正常使用上面的代码。现在我想向app添加会话存储，所以我使用了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/@angular/compiler/bundles/compiler.umd.js:14534:56）在CompileMetadataResolver.getTypeMetadata（http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14499:28）在eval（http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14642:43） at Array.forEach（native）在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）在eval（http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14324:52） at Array.forEach（native）在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） at 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的{{1}}，getItem和clear方法，如下所示：

要在会话存储中使用密钥sessionStorage设置abdheajskke令牌值，请使用：

token

要从会话存储中获取sessionStorage.setItem("token", "abdheajskke")值，请使用：

token

或者您可以创建自己的服务以使用sessionStorage.getItem("token")。以下是您可以使用的简单最小服务示例：

sessionStorage

ctorParameters.map不是函数

1 个答案: