如何为 ngrx/store 2.2.1 配置系统- config.js

Question

我正在使用 Angular 2.0.0 并且系统- config.js 配置如下

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

但是为了启动应用程序，我从@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(…)

这是我的@ngrx/store

版本

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

谁能告诉我目前做映射的方式是什么？

应用程序模块如下所示：

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 {}

谢谢。

Answer 1

在开发人员工具的网络选项卡中，您可以确定是否加载了 ngrx，但我认为问题不在于您的 system.config.js。对我来说似乎问题出在 app.module.[ts|js]。

Answer 2

在包配置中，必须指定包UMD作为入口点

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

Answer 3

将以下行添加到 systemjs.config.js 为我修复的文件

  '@ngrx/core':'npm:@ngrx/core/bundles/core.umd.js',    
  '@ngrx/store':'npm:@ngrx/store/bundles/store.umd.js', 
  '@ngrx/store-devtools':'npm:@ngrx/store-devtools/bundles/store-devtools.umd.js',

如何为 ngrx/store 2.2.1 配置系统- config.js

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

javascript

typescript

redux

ngrx

angular