我试图创建我自己的混合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，因为测试应用程序非常庞大。也许有人知道什么会产生这个错误？
我的app 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);
Mine angular app模块与示例相同，我的angularjs app模块几乎相同，只是导入部分：
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';
答案 0 :(得分：3)
目前...... （今天是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() {}
}