Angular-cli: Including external lib fails

[mfrachet]

1. I m working on Windows 7
2. I m using :
3. Ng 1.0.0-beta.5
4. Node 4.4.3
5. All the details are present here : http://stackoverflow.com/questions/37484044/loading-redux-in-angular-2-systemjs

I modifyed the angular-cli-build to include redux in VendorNpmFiles :

'redux/dist/redux.min.js'

And system-config.ts where I've included in System.conf => map object :

'redux': 'redux/dist/redux.min.js'

1. The error stack that I got http://i.stack.imgur.com/UKvmc.jpg

Thanks for your help

[filipesilva]

Heya, I tried reproducing your issue and this is what I got:

ng new testproj
cd testproj
npm install redux

Then I added these lines to src/app/testproj.component.ts:

import { createStore } from 'redux';
console.log(createStore);

This to vendorNpmFiles: 'redux/dist/redux.min.js'
This to the system-config.ts map: 'redux': 'vendor/redux/dist/redux.min.js'.

Then I ran ng serve, opened the browser, and had the Angular 2 app working and an object printed on the console. I think that adding redux in and of itself is working.

On your screenshot though, you had some RxJs errors... Which makes me think that perhaps the problem is with importing RxJs operators. How are you importing them?

[mfrachet]

I created a repository : https://github.com/Skahrz/angular-redux where you can reproduce the bug.

It seems that it happens when I try to create the store on the main.ts file

[hirenchauhan2]

So is it required to do for all other libs installed by npm after the modules installed by default by cli?
Do we have to change config of system.js and angular-cli-build.js everytime after the new npm install ?

I did npm install --save redux redux-thunk redux-logger ng2-redux. So what changes should i do? and where?
The errors i get :point_down: :point_down:

[filipesilva]

@Skahrz I cloned your repo and think I've found the problem. Add redux to system-config.ts like this instead redux: 'vendor/redux/dist/redux.min.js' (notice the vendor folder). When 3rd party files are copied over to a dist build, they go into the vendor/ folder.

@harry008 yes, whenever you install a new library you need to add it to both system-config.ts and angular-cli-build.js as shown in the wiki. You need to check the libraries themselves for what files they need to import.

We're working on better ways to add 3rd party libs but for now this is the way.

[hirenchauhan2]

This is getting worse :sleepy: going for an lib's config then i have to set config for its deps too..

as I was getting error 404 for lodash then got fixed and then it was rxjs and so on....

More can be done is to add an additional command for ng-cli for installing library in Angular2 Project, like we do npm install --save any-lib instead doing ng-install any-lib that will install the lib also sets the appropriate configs where it is required for system.js and angular-cli-build.js

[filipesilva]

We had that at one time, but it was very brittle and very hard to automatically determine the config for every package. We do recognize that adding a 3rd party lib isn't very easy right now, and we're working on easier ways of doing it.

[hirenchauhan2]

@Skahrz

Finally successfully added Redux, Ng2-Redux, Redux-Thunk, and Redux-Logger to project.
Here are the configs:

angular-cli-build.js

 /* global require, module */

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/**/*.+(js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      'redux/dist/redux.min.js',
      'ng2-redux/**/*.+(js|js.map)',
      'redux-thunk/dist/redux-thunk.min.js',
      'redux-logger/dist/index.min.js'
    ]
  });
};

And the system-config.ts looks like this:

 /***********************************************************************************************
  * User Configuration.
  **********************************************************************************************/
 /** Map relative paths to URLs. */
 const map: any = {
   'redux': 'vendor/redux/dist/redux.min.js',
   'ng2-redux': 'vendor/ng2-redux/lib/',
   'redux-logger': 'vendor/redux-logger/dist/index.min.js',
   'redux-thunk': 'vendor/redux-thunk/dist/redux-thunk.min.js',
   'lodash': 'vendor/ng2-redux/node_modules/lodash/', // have to add because Ng2-Redux Component requires it
   'rxjs' :  'vendor/rxjs' // have to add because Ng2-Redux Component requires it
 };


/** User packages configuration. */
const fmt: any = {
  format: 'cjs',
  defaultExtension: 'js'
};

const packages: any = {
  'redux': fmt,
  'ng2-redux': Object.assign({}, fmt, { main: 'index.js' }),
  'redux-logger': fmt,
  'redux-thunk': fmt,
  'lodash': Object.assign({}, fmt, { main: 'index.js' }),
  'rxjs': Object.assign({}, fmt , {
    main : 'Rx.js'
  })
};

////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
 * Everything underneath this line is managed by the CLI.
 **********************************************************************************************/
const barrels: string[] = [
  // Angular specific barrels.
  '@angular/core',
  '@angular/common',
  '@angular/compiler',
  '@angular/http',
  '@angular/router',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',

  // Thirdparty barrels.
  'rxjs',

  // App specific barrels. Add folders as project structure
  'app',
  'app/shared',
  'app/actions',
  'app/containers',
  'app/components',
  'app/reducers',
  'app/store'

  /** @cli-barrel */
];

const cliSystemConfigPackages: any = {};
barrels.forEach((barrelName: string) => {
   cliSystemConfigPackages[barrelName] = { main: 'index' };
});

/** Type declaration for ambient System. */
declare var System: any;

// Apply the CLI SystemJS configuration.
System.config({
  map: {
    '@angular': 'vendor/@angular',
    'rxjs': 'vendor/rxjs',
    'main': 'main.js',
  },
  packages: cliSystemConfigPackages
});

// Apply the user's configuration.
System.config({ map, packages });

[corasla]

Thanks @harry008 for this setup you shared. It worked like a charm.

I'd only like to add for anyone having issues getting redux-logger working to

• install redux-logger typings
• import createLogger this way -> ' import * as createLogger from 'redux-logger'; '

This is how I got the basic ng2-redux setup to work in our project.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}