首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >无法使用SystemJS启动ui-路由器混合应用程序

无法使用SystemJS启动ui-路由器混合应用程序
EN

Stack Overflow用户
提问于 2017-06-28 12:20:15
回答 1查看 942关注 0票数 4

我正在尝试从我自己的https://github.com/ui-router/sample-app-angular-hybrid中创建混合ui路由器应用程序,只使用一个不同的系统is,而不是webpack。

当应用程序加载时,它会抛出一个错误:

代码语言:javascript
运行
复制
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:

代码语言:javascript
运行
复制
(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);

除导入部分外,矿角app模块与示例相同,而应用模块几乎相同:

代码语言:javascript
运行
复制
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';
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-06-28 15:54:02

现在..。(今天是2017年6月)最新版本的servicesPlugin() ( '@uirouter/angular'https://unpkg.com/@uirouter/angular@1.0.0-beta.7)是混合模式,没有调用init部件之一:'@uirouter/angular'

要解决这个问题,只需在主模块之前包含以下行即可。

代码语言:javascript
运行
复制
// FIX for the HYBRID
import { servicesPlugin }        from '@uirouter/angular';
servicesPlugin(null); 

然后继续..。

代码语言:javascript
运行
复制
// 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() {}
}
票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/44802253

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档