定义angular2应用程序的本地存储

如何设置用于定义 localStorage 的 package.json 和 app.module.ts 文件?这些是文件: app.module.ts 从'@ angular/router'导入{RouterModule};从'angular2-universal'导入{UniversalModule};从'@ angular/core'导入{NgModule};从"@ angular/forms"导入{FormsModule}；//从'primeng/primeng'导入{DataTableModule，SharedModule};从"./components/app/app.component"导入{AppComponent}从'./components/navmenu/navmenu.component'导入{NavMenuComponent}；从"./components/home/home.component"导入{HomeComponent}；从"./components/login/login.component"导入{LoginComponent}；从'./components/fetchdata/fetchdata.component'导入{FetchDataComponent}；从"./components/counter/counter.component"导入{CounterComponent}；从"./components/login/authentication.service"导入{AuthenticationService}；@NgModule({引导程序:[AppComponent]，声明:[AppComponent，NavMenuComponent，CounterComponent，FetchDataComponent，HomeComponent，LoginComponent]，提供者:[认证服务]，进口:[UniversalModule，//必须先导入.这也会自动导入BrowserModule，HttpModule和JsonpModule.FormsModule，RouterModule.forRoot([{path:``，redirectTo:'home'，pathMatch:'full'}，{path:'home'，component:HomeComponent}，{path:'login'，component:LoginComponent}，{path:'counter'，component:CounterComponent}，{path:'fetch-data'，component:FetchDataComponent}，{path:'**'，redirectTo:'home'}，])]})导出类AppModule {} package.json {"name":"Angular2Spa"，"version":"0.0.0"，依赖关系":{"@ angular/common":"2.0.0"，"@ angular/compiler":"2.0.0"，"@ angular/core":"2.0.0"，"@ angular/forms":"2.0.0"，"@ angular/http":"2.0.0"，"@ angular/platform-b​​rowser":"2.0.0"，"@ angular/platform-b​​rowser-dynamic":"2.0.0"，"@ angular/platform-server":"2.0.0"，"@ angular/router":"3.0.0"，"@ types/node":"^ 6.0.38"，"angular2-platform-node":〜2.0.10"，"angular2-universal":〜2.0.10"，"angular2-universal-polyfills":〜2.0.10"，"aspnet-prerendering":"^ 1.0.6"，"aspnet-webpack":"^ 1.0.11"，"bootstrap":"^ 3.3.7"，"css":"^ 2.2.1"，"css-loader":"^ 0.25.0"，"es6-shim":"^ 0.35.1"，"expose-loader":"^ 0.7.1"，"extract-text-webpack-plugin":"^ 1.0.1"，"file-loader":"^ 0.9.0"，"isomorphic-fetch":"^ 2.2.1"，"jquery":"^ 2.2.1"，"preboot":"^ 4.5.2"，"raw-loader":"^ 0.5.1"，"rxjs":"5.0.0-beta.12"，"style-loader":"^ 0.13.0"，"to-string-loader":"^ 1.1.5"，"ts-loader":"^ 0.8.2"，"typescript":"^ 2.0.0"，"url-loader":"^ 0.5.7"，"webpack":"^ 1.12.14"，"webpack-externals-plugin":"^ 1.0.0"，"webpack-hot-middleware":"^ 2.10.0"，"webpack-merge":"^ 0.14.1"，"zone.js":"^ 0.6.21"}} 这是产生错误的代码: 从'@ angular/core'导入{可注入}；从'@ angular/http'导入{Http，Headers，Response，RequestOptions};从"rxjs"导入{Observable}；导入'rxjs/add/operator/map'@Injectable()导出类AuthenticationService {公共令牌:字符串；public codusuario:字符串；构造函数(私有http:Http){//设置令牌(如果保存在本地存储器中)var currentUser = JSON.parse(localStorage.getItem('currentUser'));this.token = currentUser&&currentUser.token;}登录名(用户名，密码):Observable< boolean>{//...}logout():无效{//清除令牌，从本地存储中删除用户以注销用户this.token = null;localStorage.removeItem('currentUser');} } 解决方案 localStorage应该在全局JS级别定义，但是您没有Typescript定义，因此编译器会说未定义.只需尝试将其放在文件的开头声明var localStorage:任意； ，然后在TypeScript代码中使用localStorage.您也可以尝试使用angular2-localstorage模块.I am using localStorage in an authentication service in one app. Now I am migrating the old app to a new project structure with webpack. Of course, I have different package.json files, but I do not know which specific node module I need.This is the error:Exception: Call to Node module failed with error: Error: Uncaught (in promise): ReferenceError: localStorage is not definedThe component for login is entirely copied to the new project, and it has not any compilation errors, I added the component and authentication service to my app.module but I get that error.How do I set up package.json and app.module.ts files for defining localStorage?These are the files:app.module.tsimport { RouterModule } from '@angular/router';import { UniversalModule } from 'angular2-universal';import { NgModule } from '@angular/core';import { FormsModule } from '@angular/forms';// import { DataTableModule, SharedModule} from 'primeng/primeng';import { AppComponent } from './components/app/app.component'import { NavMenuComponent } from './components/navmenu/navmenu.component';import { HomeComponent } from './components/home/home.component';import { LoginComponent } from './components/login/login.component';import { FetchDataComponent } from './components/fetchdata/fetchdata.component';import { CounterComponent } from './components/counter/counter.component';import { AuthenticationService } from './components/login/authentication.service';@NgModule({ bootstrap: [ AppComponent ], declarations: [ AppComponent, NavMenuComponent, CounterComponent, FetchDataComponent, HomeComponent, LoginComponent ], providers: [ AuthenticationService ], imports: [ UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too. FormsModule, RouterModule.forRoot([ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, { path: 'login', component: LoginComponent }, { path: 'counter', component: CounterComponent }, { path: 'fetch-data', component: FetchDataComponent }, { path: '**', redirectTo: 'home' }, ]) ]})export class AppModule {}package.json{ "name": "Angular2Spa", "version": "0.0.0", "dependencies": { "@angular/common": "2.0.0", "@angular/compiler": "2.0.0", "@angular/core": "2.0.0", "@angular/forms": "2.0.0", "@angular/http": "2.0.0", "@angular/platform-browser": "2.0.0", "@angular/platform-browser-dynamic": "2.0.0", "@angular/platform-server": "2.0.0", "@angular/router": "3.0.0", "@types/node": "^6.0.38", "angular2-platform-node": "~2.0.10", "angular2-universal": "~2.0.10", "angular2-universal-polyfills": "~2.0.10", "aspnet-prerendering": "^1.0.6", "aspnet-webpack": "^1.0.11", "bootstrap": "^3.3.7", "css": "^2.2.1", "css-loader": "^0.25.0", "es6-shim": "^0.35.1", "expose-loader": "^0.7.1", "extract-text-webpack-plugin": "^1.0.1", "file-loader": "^0.9.0", "isomorphic-fetch": "^2.2.1", "jquery": "^2.2.1", "preboot": "^4.5.2", "raw-loader": "^0.5.1", "rxjs": "5.0.0-beta.12", "style-loader": "^0.13.0", "to-string-loader": "^1.1.5", "ts-loader": "^0.8.2", "typescript": "^2.0.0", "url-loader": "^0.5.7", "webpack": "^1.12.14", "webpack-externals-plugin": "^1.0.0", "webpack-hot-middleware": "^2.10.0", "webpack-merge": "^0.14.1", "zone.js": "^0.6.21" }}This is the code where the error is produced:import { Injectable } from '@angular/core';import { Http, Headers, Response, RequestOptions } from '@angular/http';import { Observable } from 'rxjs';import 'rxjs/add/operator/map'@Injectable()export class AuthenticationService { public token: string; public codusuario: string; constructor(private http: Http) { // set token if saved in local storage var currentUser = JSON.parse(localStorage.getItem('currentUser')); this.token = currentUser && currentUser.token; }login(username, password): Observable<boolean> { //...}logout(): void { // clear token remove user from local storage to log user out this.token = null; localStorage.removeItem('currentUser');}} 解决方案 localStorage should be defined at global JS level, but you don't have the Typescript definition for it so the compiler says that is not defined.Just try to put at the start of the file declare var localStorage : any;and then use localStorage in the TypeScript code.You can also try to use angular2-localstorage module. 这篇关于定义angular2应用程序的本地存储的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！