Angular 2 Quickstart about store HOT 5 CLOSED

I managed to get this going by setting the following in map in system.config.js (after the bits in the quick start)

'ng2-redux': 'node_modules/ng2-redux/lib',
'redux': 'node_modules/redux/dist/redux.min.js',
'lodash': 'node_modules/ng2-redux/node_modules/lodash/'

and in packages (after the bits in the quick start)

'ng2-redux': { main: 'index.js', defaultExtension: 'js' }

That bit about lodash looks a little suspect to me because it might be used in other packages and in all honesty the webpack approach looks a lot easier so I think I will go for that.

Thanks Seth for your help.

from store.

If I recall correctly the angular2 quickstart is based on SystemJS which means you need to do a little extra config over and above a simple npm install --save ng2-redux.

Npm will install the files in node_modules, but SystemJS isn't smart enough to look there automatically when it resolves imports. My recommendation is to find this portion of the quickstart's system.config.js:

  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'
  };

and change it to

  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',
    'ng2-redux': 'node_modules/ng2-redux'
  };

Let me know if that doesn't work and I'll dig a little deeper (I mostly use webpack these days so my systemJS skills are a little weak :)

from store.

Hi Seth

Thanks very much for your suggestion - unfortunately it doesn't work although it does sound like that is the problem.

I've been using browserify and webpack for a while now and normally I would use webpack for preference because of the work I have been doing with react/redux.

I might be working on an Angular 2 project next so I thought I would start learning about it and I just picked up the stuff of the Angular 2 website because I thought that would be the simplest way to go. I also really like working with redux so ng2-redux sounds like a really good option.

When I found your solution didn't work I had a look on SystemJS and this does seem like something that lots of people have run into although I didn't really see a simple solution. So I guess it seems kind of odd to me for a great number of the Angular 2 examples and seeds to use SystemJS because it would seem to make things more difficult than they need to be - but I've only just started looking at it so what do i know :0)

Its unfair to ask, particularly as it doesn't seem to be an ng2-redux problem, but if you got any further suggestions I would very grateful.

Thanks very much

Chris

from store.

Great, glad it worked out.

from store.

For those trying to get this working with Angular Material 2, I took @talktough 's suggestion and:

First, modified the system-config.ts:

const map: any = {
  '@angular2-material': 'vendor/@angular2-material',
  'ng2-redux': 'vendor/ng2-redux/lib',
  'redux': 'vendor/redux/dist/redux.min.js',
};

Second, modified the angular-cli-build.js:

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

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-material/**/*',
      'ng2-redux/lib/**/*',
      'redux/dist/redux.min.js'
    ]
  });
};

Third, manually installed redux via npm install redux --save.

Fourth, just restarted the npm start and she appeared to be good to go.

from store.