angular - 无法使用 SystemJS 启动 ui-router 混合应用程序

Question

我正尝试从我自己创建混合 ui-router 应用程序，如 https://github.com/ui-router/sample-app-angular-hybrid 中所示只有一个区别——使用 systemjs 而不是 webpack。

应用加载时会抛出错误:

zone.js:643 Unhandled Promise rejection: Cannot read property 'when' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'when' of undefined
    at new Resolvable (resolvable.ts:86)
    at Function.Resolvable.fromData (resolvable.ts:174)
    at eval (angular-hybrid.ts:205)
    at Object.invoke (angular.js:5003)
    at eval (angular.js:4805)
    at forEach (angular.js:403)
    at createInjector (angular.js:4805)
    at doBootstrap (angular.js:1914)
    at Object.bootstrap (angular.js:1935)
    at bootstrap (constants.ts:1) TypeError: Cannot read property 'when' of undefined
    at new Resolvable (http://localhost:3000/node_modules/@uirouter/core/_bundles/ui-router-core.js:2627:55)
    at Function.Resolvable.fromData (http://localhost:3000/node_modules/@uirouter/core/_bundles/ui-router-core.js:2710:12)
    at eval (http://localhost:3000/node_modules/@uirouter/angular-hybrid/_bundles/ui-router-angular-hybrid.js:194:63)
    at Object.invoke (http://localhost:3000/node_modules/angular/angular.js:5003:19)
    at eval (http://localhost:3000/node_modules/angular/angular.js:4805:62)
    at forEach (http://localhost:3000/node_modules/angular/angular.js:403:20)
    at createInjector (http://localhost:3000/node_modules/angular/angular.js:4805:3)
    at doBootstrap (http://localhost:3000/node_modules/angular/angular.js:1914:20)
    at Object.bootstrap (http://localhost:3000/node_modules/angular/angular.js:1935:12)
    at bootstrap (http://localhost:3000/node_modules/@angular/upgrade/bundles/upgrade-static.umd.js:62:20)

我无法为其创建 plunkr，因为测试应用程序非常庞大。也许有人知道什么会产生此错误？

我的应用程序 systemjs.config.js:

(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': '../node_modules/',
      'bower_libs:': 'lib/'
    },
    // map tells the System loader where to look for things
    map: {
      'ng-loader': '../systemjs-angular-loader.js',
      // our app is within the app folder
      'app': 'app',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

      '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',

      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',

      // UI-router hybrid dependencies
      '@uirouter/core': 'npm:@uirouter/core/_bundles/ui-router-core.js',
      '@uirouter/angular-hybrid': 'npm:@uirouter/angular-hybrid/_bundles/ui-router-angular-hybrid.js',
      '@uirouter/angularjs': 'npm:@uirouter/angularjs/release/angular-ui-router.js',
      '@uirouter/angular': 'npm:@uirouter/angular/_bundles/ui-router-ng2.js',
      '@uirouter/rx': 'npm:@uirouter/rx/_bundles/ui-router-rx.js',

      // AngularJS app dependencies
      'jquery': 'bower_libs:jquery/dist/jquery.js',
      'lodash': 'bower_libs:lodash/lodash.js',
      'angular': 'npm:angular/angular.js',
      'angular-animate': 'bower_libs:angular-animate/angular-animate.js',
      'angular-sanitize': 'bower_libs:angular-sanitize/angular-sanitize.js',
      'angular-resource': 'bower_libs:angular-resource/angular-resource.js',
      'angular-cookies': 'bower_libs:angular-cookies/angular-cookies.js',
      'ui.bootstrap': 'bower_libs:angular-ui-bootstrap-bower/ui-bootstrap-tpls.js',
      'ui.validate': 'bower_libs:angular-ui-validate/dist/validate.js',
      'ui.layout': 'bower_libs:angular-ui-layout/src/ui-layout.js',
      'angucomplete-alt': 'bower_libs:angucomplete-alt/angucomplete-alt.js',
      'ng-table': 'bower_libs:ng-table/dist/ng-table.js',
      'ngInfiniteScroll': 'bower_libs:ngInfiniteScroll/build/ng-infinite-scroll.js',
      'angular-translate': 'bower_libs:angular-translate/angular-translate.js',
      'angular-translate-loader-partial': 'bower_libs:angular-translate-loader-partial/angular-translate-loader-partial.js',
      'ng-file-upload-shim': 'bower_libs:ng-file-upload/ng-file-upload-shim.js',
      'ng-file-upload': 'bower_libs:ng-file-upload/ng-file-upload.js',
      'angular-sortable-view': 'bower_libs:angular-sortable-view/src/angular-sortable-view.js',
      'angular-bootstrap-contextmenu': 'bower_libs:angular-bootstrap-contextmenu/contextMenu.js',
      'palettejs': 'bower_libs:palettejs/palette.js'
    },
    meta: {
      'angular': {
        format: 'global',
        exports: 'angular',
        deps: ['jquery']
      }
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: '../main.js',
        defaultExtension: 'js',
        meta: {
          './*.js': {
            loader: 'ng-loader'
          }
        }
      },
      rxjs: {
        defaultExtension: 'js'
      },
      'angular-in-memory-web-api': {
        main: './index.js',
        defaultExtension: 'js'
      }
    }
  });
})(this);

我的 angular 应用程序模块与示例中的相同，我的 angularjs 应用程序模块几乎相同，除了导入部分:

import 'jquery';
import 'lodash';
import * as angular from 'angular';
import 'angular-animate';
import 'angular-sanitize';
import 'angular-resource';
import 'angular-cookies';
import { upgradeModule } from "@uirouter/angular-hybrid";
import uiRouter from '@uirouter/angularjs';
import 'ng-table';
import 'ngInfiniteScroll';
import 'angular-translate';
import 'angular-translate-loader-partial';
import 'ng-file-upload-shim';
import 'ng-file-upload';
import 'ui.bootstrap';
import 'ui.validate';
import 'angucomplete-alt';
import 'ui.layout';
import 'angular-sortable-view';
import 'angular-bootstrap-contextmenu';
import 'palettejs';

Answer 1

目前...(今天是 2017 年 6 月) '@uirouter/angular' 的最新版本 ( @version v1.0.0-beta.7 ) 处于混合模式，不调用初始化部分之一:servicesPlugin()

要解决这个问题，只需在主模块之前包含这些行

// FIX for the HYBRID
import { servicesPlugin }        from '@uirouter/angular';
servicesPlugin(null); 

然后继续...

// Our new ng++ module
@NgModule({
  imports: [
    UpgradeModule,
    UIRouterModule,
    UIRouterUpgradeModule,
    UIRouterModule.forChild({ states: states, useHash: true }),
    BrowserModule
  ],
  declarations: [
    ...
  ],
  entryComponents: [
    ...
  ],
  providers: [
    { provide: NgModuleFactoryLoader, useClass: SystemJsNgModuleLoader }
  ]
})
export class NewAppModule {
  ngDoBootstrap() {}
}