imports of lodash...method and localforage, and usage of ´this´

[axtho]

importing js based libraries has always been tricky. With the latest rollup 0.50 things are not improving much.

It would be helpful to get an example in this seed on how to import lodash (or one of its methods, since most never use the entire library) and something like localforage.

Additionally, since we are talking about code that uses Typescript we will encounter references to this. With the setup as I have it now (see configs and package.json below) it get these warnings:

The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten

So rollup rewrites this to undefined, which does not seem as helpful?

Issues surrounding localforage look like this:

setItem' is not exported by 'node_modules/localforage/dist/localforage.js' Issues with lodash.isempty like so:

Error: 'isEmpty' is not exported by node_modules/lodash.isempty/index.js

Here is my setup:

package.json

"peerDependencies": {
    "@angular/common": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "@ngrx/effects": "github:ngrx/effects-builds",
    "@ngrx/router-store": "github:ngrx/router-store-builds",
    "@ngrx/store": "github:ngrx/store-builds"
  },
  "devDependencies": {
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "@compodoc/compodoc": "^1.0.0-beta.10",
    "@ngrx/effects": "github:ngrx/effects-builds",
    "@ngrx/entity": "github:ngrx/entity-builds",
    "@ngrx/router-store": "github:ngrx/router-store-builds",
    "@ngrx/store": "github:ngrx/store-builds",
    "@types/jasmine": "2.5.36",
    "@types/jwt-decode": "^2.2.1",
    "@types/node": "^6.0.46",
    "camelcase": "^4.0.0",
    "concurrently": "3.4.0",
    "core-js": "^2.4.1",
    "glob": "^7.1.1",
    "jasmine-core": "^2.5.2",
    "jwt-decode": "^2.2.0",
    "karma": "^1.5.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-coverage": "^1.1.1",
    "karma-html-reporter": "^0.2.7",
    "karma-jasmine": "^1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-remap-coverage": "^0.1.4",
    "localforage": "^1.5.2",
    "lodash.isempty": "^4.4.0",
    "rimraf": "^2.6.1",
    "rollup": "^0.50.0",
    "rollup-plugin-commonjs": "^8.0.2",
    "rollup-plugin-node-resolve": "^3.0.0",
    "rollup-plugin-sourcemaps": "^0.4.1",
    "rollup-plugin-uglify": "^2.0.1",
    "rxjs": "^5.5.0",
    "standard-version": "^4.0.0",
    "tslint": "^4.4.2",
    "typescript": "~2.5.3",
    "zone.js": "^0.8.10"
  }

build.js (fixed up for rollup 0.50.x) see the file here

The imports in the TS files look like this: lodash import { isEmpty } from 'lodash.isempty'; localforage import * as localForage from 'localforage'; jwt-decode (even worse)

import * as jwt_decode_ from 'jwt-decode';
const jwt_decode = jwt_decode_;

Since there seems so much confusion and issues about these imports and bundling with rollup, it would be great to have that as part of such a seed project.

(i have spent too much time this morning trying to get this working)

[cyrilletuzi]

For localstorage, you can use angular-async-local-storage, it will fit directly into Angular.