Как использовать модуль angular2 -local-storage в приложении Angular 2

Ответ 1

Импортируйте его и добавьте в bootstrap()

bootstrap(AppComponent, [OtherProvider, LocalStorage]);

Внесите его в компонент, директиву или службу, где вы хотите ее использовать.

export class SomeComponent {
  constructor(private ls:LocalStorage) {}
  clickHandler() {
    this.ls.set('someKey', 'someValue');
  }
  otherClickHandler() {
    console.log(this.ls.get('someKey'); // should print 'someValue'
  }
}

Ответ 2

Я столкнулся с такой же проблемой, и после отладки кода я нашел решение.

Проблема связана с созданием пакета npm не в исходном коде.

Когда вы запускаете "npm install angular2 -localStorage", он загружает пакет в папку node_module, но в веб-развертывании эта папка выходит за пределы node_module. Из-за этого веб-сайт не может найти пакет, следовательно, ошибка, которую вы получаете в браузере.

Я скопировал эти 2 файла "LocalStorage.ts" и "LocalStorageEmitter.ts" и передал их непосредственно в свой код.

Он работает как шарм!

Ответ 3

Что вы используете для своей среды разработки?

Если вы используете SystemJS, например, учебники angular2, вам нужно добавить следующее в файл systemjs.conf.js:

в области карты, которую вы должны добавить:

'angular2 -localstorage': 'node_modules/angular2 -localstorage'

Например:

var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs',
    'angular2-localstorage':      'node_modules/angular2-localstorage'
  };

В зависимости от вашей настройки вам также может потребоваться добавить:

'angular2-localstorage': {
    defaultExtension: "js"
}

в область "пакеты".

Затем в главном загрузчике вы захотите его импортировать:

import {LocalStorageService, LocalStorageSubscriber} from 'angular2-localstorage/LocalStorageEmitter';

И обновите загрузчик и подпишитесь:

например:

var appPromise = bootstrap(myapp, [ROUTER_PROVIDERS, LocalStorageService]);
LocalStorageSubscriber(appPromise);

Затем... чтобы фактически использовать его, вы сделаете что-то вроде этого внутри класса:

Импортировать:

import {LocalStorage, SessionStorage} from "angular2-localstorage/WebStorage";

Затем внутри класса:

@LocalStorage() public foo:string = ''; // this will initialize to empty string, you might want something different.
this.foo = this.foo + "Changed";  //foo variable and '/foo' localstorage entry will change any time the variable changes. *note, but not the other way around

Ответ 4

Это зависит от вашего разработчика. среда, в частности инструменты, используемые для компиляции вашего typescript. Если вы используете SystemJS, вам нужно сопоставить его в вашем файле конфигурации. Для информации о том, как это работает, здесь является ссылкой на конфигурацию Angular 2 официальный "Обзор героев" с быстрым запуском, в котором используется SystemJS.

map: {
    'angular2-localstorage': 'node_modules/angular2-localstorage'
}

Ответ 5

Кажется, что ошибка связана с этой библиотекой. Я использую angular-cli для создания приложения Angular 2. В качестве проверки работоспособности я попробовал пакет angular2-cookie. Обратите внимание, что инструкции по установке и использованию этого пакета с Angular 2 устарели.

Шаг 1. Установите пакет.

npm install angular2-cookie --save

Шаг 2. измените параметры SystemJS в system-config.ts

const map: any = {
 'angular2-cookie': 'vendor/angular2-cookie'
}

const packages: any = {
 'angular2-cookie' : {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'core.js'
  }
}

Шаг 3. измените конструкцию angular -cli script angular-cli-build.js

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(ts|js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)'
      'angular2-cookie/**/*.+(ts|js|js.map)'
    ]
  });
};

Шаг 4. Предоставьте услугу в main.ts

import { CookieService } from 'angular2-cookie/core';
...
bootstrap(AppComponent, [
  HTTP_PROVIDERS,
  CookieService
])
.catch( (err:any) => console.error(err));

Шаг 5. Вы можете загрузить ваше приложение с помощью ng serve, но после 4 шагов выше вам придется его убить (например, ctrl-c) и перезапустить его ng serve.

Теперь, если вы повторите эти 5 шагов с помощью angular2-localstorage, он НЕ будет работать.

Шаг 1. установите

npm install --save angular2-localstorage

Шаг 2. system-config.ts

const map: any = {
  'angular2-cookie': 'vendor/angular2-cookie',
  'angular2-localstorage': 'vendor/angular2-localstorage'
};

/** User packages configuration. */
const packages: any = {
  'angular2-localstorage': {
    format: 'cjs',
    defaultExtension: 'ts'
  },
  'angular2-cookie' : {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'core.js'
  }
}

Шаг 3. angular-cli-build.js

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(ts|js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)'
      'angular2-cookie/**/*.+(ts|js|js.map)',
      'angular2-localstorage/**/*.+(ts|js|js.map)'
    ]
  });
};

Шаг 4. main.ts

import { CookieService } from 'angular2-cookie/core';
import { LocalStorageService } from 'angular2-localstorage/LocalStorageEmitter';
...
bootstrap(AppComponent, [
  HTTP_PROVIDERS,
  CookieService,
  LocalStorageService
])
.catch( (err:any) => console.error(err));

Шаг 5. Убейте и перезапустите ng-serve

Вы увидите следующее.

zone.js:461 Unhandled Promise rejection: (SystemJS) SyntaxError: Unexpected token import
        at Object.eval (http://localhost:4200/main.js:8:29)
        at eval (http://localhost:4200/main.js:27:4)
        at eval (http://localhost:4200/main.js:28:3)
    Evaluating http://localhost:4200/vendor/angular2-localstorage/LocalStorageEmitter.ts
    Evaluating http://localhost:4200/main.js
    Error loading http://localhost:4200/main.js ; Zone:  ; Task: Promise.then ; Value: Error: (SystemJS) SyntaxError: Unexpected token import(…)

Если вы попытаетесь изменить system-config.ts как один из следующих пользователей, пожалуйста, выполните следующие действия.

'angular2-localstorage': {
    defaultExtension: "js"
}

Затем вы увидите следующее.

zone.js:101 GET http://localhost:4200/vendor/angular2-localstorage/LocalStorageEmitter.js 404 (Not Found)

Не имеет значения, добавите или удалите format: 'cjs', вы все равно получите 404.

Конечно, одно отличие состоит в том, что angular2-cookie записано в JavaScript, а angular2-localstorage записано в TypeScript. Но все же идеи должны быть одинаковыми.

Мне кажется, что консоль жалуется на инструкцию import.

Этот билет предлагает вам создать пакет (потому что есть ошибка с npm), но пользователь все еще сказал, что это не так, т работы.

Я не думаю, что в этот момент мы можем сделать что-то об этом пакете (как пользователи).

О, на веб-сайте проекта.

Этот проект не поддерживается. Пожалуйста, подумайте над тем, чтобы принять это. Дополнительная информация на https://github.com/open-source-chest/take-it-over.