how to configure system- config.js for ngrx/store 2.2.1

I'm using Angular 2.0.0 and have the system- config.js configured as follows

/** Map relative paths to URLs. */
const map: any = {
'app': 'src/app',
'main': 'main.js',
'@angular/core': 'vendor/@angular/core/bundles/core.umd.js',
'@angular/common': 'vendor/@angular/common/bundles/common.umd.js',
'@angular/compiler': 'vendor/@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'vendor/@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'vendor/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'vendor/@angular/http/bundles/http.umd.js',
'@angular/router': 'vendor/@angular/router/bundles/router.umd.js',
'@angular/forms': 'vendor/@angular/forms/bundles/forms.umd.js',
'ng2-bootstrap': 'vendor/ng2-bootstrap',
'ng2-translate': 'vendor/ng2-translate',
'angular2-fontawesome': 'vendor/angular2-fontawesome',
'@ngrx': 'vendor/@ngrx',
'moment': 'vendor/moment/min/moment.min.js'
};

/** User packages configuration. */
const packages: any = {
'app': {main: 'main', defaultExtension: 'js'},
'rxjs': {main: 'Rx.js', defaultExtension: 'js'},
'ng2-bootstrap': { defaultExtension: 'js' },
'ng2-translate': { defaultExtension: 'js' },
'angular2-fontawesome': { defaultExtension: 'js' },
'@ngrx/core': {
main: 'index.js',
format: 'cjs'
},
'@ngrx/store': {
main: 'index.js',
format: 'cjs'
},
'@ngrx/effects': {
main: 'index.js',
format: 'cjs'
}
};


////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
* Everything underneath this line is managed by the CLI.
**********************************************************************************************/
const barrels: string[] = [
// Angular specific barrels.
'@angular/core',
'@angular/common',
'@angular/compiler',
'@angular/forms',
'@angular/http',
'@angular/router',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
// Thirdparty barrels.
'rxjs',
// App specific barrels.
'app/',
'app/components/',
'app/components/+home/',
'app/components/header',
'app/components/shared',
'app/accounts/',
'app/accounts/+login/',
'app/accounts/+signup/'

/** @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 });


but to launch the application I get the following error from @ngrx/store/index.js

zone.js:344 Unhandled Promise rejection: SyntaxError: Unexpected token export
at Object.eval (http://localhost:4200/app/app.module.js:14:15)
at eval (http://localhost:4200/app/app.module.js:53:4)
at eval (http://localhost:4200/app/app.module.js:54:3)
Evaluating http://localhost:4200/vendor/@ngrx/store/index.js
Evaluating http://localhost:4200/app/app.module.js
Evaluating http://localhost:4200/app/index.js
Evaluating http://localhost:4200/main.js
Error loading http://localhost:4200/main.js ; Zone: <root> ; Task: Promise.then ; Value: Error: SyntaxError: Unexpected token export(…) nullconsoleError @ zone.js:344
zone.js:346 Error: Uncaught (in promise): Error: SyntaxError: Unexpected token export(…)


This is my version of @ngrx/store

MyPC@user ~/Documents/projects/photogram: npm list @ngrx/store
instangular@0.0.0 /Users/user/Documents/projects/photogram
└── @ngrx/store@2.2.1


Can anyone tell me what is the current way of doing the mapping?

The app module look like this:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Ng2BootstrapModule } from 'ng2-bootstrap/ng2-bootstrap';
import { StoreModule } from '@ngrx/store';
/* App Root */
import { AppComponent } from './app.component';
/* Feature Modules */
import { AccountsModule } from './accounts/accounts.module';
/* root reducer */
import { appReducer } from './app.reducers';
import { routing, appRoutingProviders } from './app.routing';
/* App declarations */
import { HomeComponent } from './components/+home/';
import { HeaderComponent } from './components/header/';

@NgModule({
declarations: [
AppComponent,
HomeComponent,
HeaderComponent
],
imports: [
BrowserModule,
AccountsModule,
StoreModule.provideStore(appReducer),
routing,
Ng2BootstrapModule
],
providers: [
appRoutingProviders
],
bootstrap: [AppComponent]
})
export class AppModule {}


thanks.

Continue reading...