javascriptangulartypescriptreduxngrx

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.


Solution

  • In the package configuration , you must specify the bundle UMD as the entry point

    '@ngrx/core': {
       main: 'bundles/core.min.umd.js',
       format: 'cjs'
     },
     '@ngrx/store': {
       main: 'bundles/store.min.umd.js',
       format: 'cjs'
     }