How to configure SystemJs for ImmutableJs to work in Angular 2 project

Question

so i am trying to import ImmutableJs into my angular 2 project, i am using this kind of systemjs config

(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'src/client':                 'src/client', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs',
    'highcharts':                 'node_modules/highcharts',
    'angular2-highcharts':        'node_modules/angular2-highcharts',
    'immutable':                  'node_modules/immutable/dist'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'src/client':                 { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
    'highcharts':                 { defaultExtension: 'js' },
    'angular2-highcharts':        { main: 'index.js', defaultExtension: 'js' },
    'immutable':                  { defaultExtension: 'js' }
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

but it VS Code doesnt pick it up when i try

import { Immutable } from 'immutable/dist/immutable';

i get that immutable.d.ts is not a module.

import { Immutable } from 'immutable/immutable';

just drops cant find module (though this should work since i mapped immutable to immutable/dist directory where immutable.js resides). Searching around the net i couldnt find an answer tho i found some people asking similar questions that werent answered for last 6 months. Any help is appreciated if only just directing to a source that could explain in details whats what

bstockwell · Accepted Answer · 2016-07-13 15:24:35Z

1

The system.config.js file doesn't affect the import statements--it controls how files are resolved for the end user. As such, the from location in your first import statement is correct, though "immutable" by itself would also be fine, as the loader will resolve the path by itself (I'm not exactly sure of the specifics of this process, however).

However, you can't import the entire Immutable module in this way, since nothing called "Immutable" is never exported in immutable.d.ts. You have 2 options:

Import a wildcard module as a variable called Immutable:

import * as Immutable from 'immutable';
...
//in your code later:
Immutable.Map({a:1, b:2, c:3})

Import a individual modules:

import {Map} from 'immutable';
...
//in your code later:
Map({a:1, b:2, c:3})

You still need to configure system.config.js for the front end like so:

var map = {
    ...
    'immutable':                  'node_modules/immutable/dist'
};

var packages = {
    ...
    'immutable':                  { main: 'immutable.js', defaultExtension: 'js' }
};

that tells the browser where to find the exports used above.

answered Jul 13, 2016 at 15:24

bstockwell

5144 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

LithStud Over a year ago

ahh that makes sense :) thank you for a comprehensive answer!

Collectives™ on Stack Overflow

How to configure SystemJs for ImmutableJs to work in Angular 2 project

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related