Question

当我尝试在此注入AuthService时，我收到此错误 component：无法解析AppHeaderComponent的所有参数：（路由器，？，BackendConnectorService）。

import { Router } from '@angular/router';
import { Component, ViewEncapsulation, EventEmitter, Input, Output, Inject }  from '@angular/core';

import { StoreService, BackendConnectorService, AuthService } from "@app/services";
console.log(AuthService);
@Component({
    moduleId: module.id,
    selector: 'app-header',
    templateUrl: './app-header.component.html',
    styleUrls: ['./app-header.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppHeaderComponent {
   constructor(private router:Router, private authService: AuthService, private   backendConnectorService: BackendConnectorService) { }
}

我有两个内部模块@ app / shared创建，其中包含包含@ app / shared服务的组件和@ app / services 取决于服务。我提到AppHeaderComponent是存储在@ app / shared
中

我的系统js config看起来像这样

(function (global) {
  // setup environment which will affect angular2 providers
  if (!window) {
    window = {};
  }
  window.ENV = 'development'
  // map tells the System loader where to look for things
  var appMainSrcFolder = 'dist';

  var map = {
    //application internal

    'src': appMainSrcFolder, // 'dist',
    '@app': appMainSrcFolder + '/app',
    '@app/services': appMainSrcFolder + '/app/shared/services',
    '@app/shared': appMainSrcFolder + '/app/shared',
    '@app/pipes': appMainSrcFolder + '/app/shared/pipes',

    '@vaadin': 'node_modules/@vaadin',
    '@angular': 'node_modules/@angular',
    '@angular2-material': 'node_modules/@angular2-material',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs': 'node_modules/rxjs',
    'ag-grid-ng2': 'node_modules/ag-grid-ng2',
    'ag-grid': 'node_modules/ag-grid',
    'angular2-tree-component':    'node_modules/angular2-tree-component',
    'lodash':                     'node_modules/lodash',
    'infinite-scroll': 'node_modules/angular2-infinite-scroll'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'src': { main: 'main', defaultExtension: 'js' },
    'rxjs': { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
    'lib': { format: 'register', defaultExtension: 'js' },
    'ag-grid-ng2': { defaultExtension: "js" },
    'ag-grid': { defaultExtension: "js" },
    '@vaadin/angular2-polymer': { main: 'index.js', defaultExtension: 'js' },

    // map application internal packages
    '@app': { main: 'index.js', defaultExtension: 'js' },
    '@app/services': { main: 'index.js', defaultExtension: 'js', meta: { format: 'cjs' } },
    '@app/shared': { main: 'index.js', defaultExtension: 'js', meta: {
      format: 'cjs',
        deps:[
          '@app/services',
          '@app/pipes'
        ]
    }},
    '@app/pipes': { main: 'index.js', defaultExtension: 'js', format: 'cjs' },
    'angular2-tree-component'   : { main: 'dist/angular2-tree-component.js', defaultExtension: 'js' },
    'lodash'                    : { main: 'lodash.js', defaultExtension: 'js' },

    'infinite-scroll': { main: "angular2-infinite-scroll.js", defaultExtension: "js" }
  };

  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];

  var ng2MaterialPackageNames = [
    'core',
    'button',
    'card',
    'checkbox',
    'grid-list',
    'icon',
    'input',
    'list',
    'menu',
    'progress-bar',
    'progress-circle',
    'radio',
    'sidenav',
    'slide-toggle',
    'tabs',
    'toolbar'
  ];

  // Individual files (~300 requests):
  function packIndex(bundleName, pkgName) {
    packages[bundleName + '/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }

  // Bundled (~40 requests):
  function packUmd(bundleName, pkgName) {
    packages[bundleName + '/' + pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }

  // Most environments should use UMD; some (Karma) need the individual index files
  // Add package entries for angular packages
  ngPackageNames.forEach(function (pkgName) {
    System.packageWithIndex ? packIndex('@angular', pkgName) : packUmd('@angular', pkgName);
  });

  // Add package entries for angular material packages
  ng2MaterialPackageNames.forEach(function (pkgName) {
    packages['@angular2-material/' + pkgName] = {
      defaultExtension: 'js',
      main: pkgName + '.js'
    }
  });

  var config = {
    map: map,
    packages: packages,
    meta: {
      '/shared/*': {
        format: 'cjs',
        deps:[
          'dist/app/services/index'
        ]
      }
    }
  };
  System.config(config);
})(this);

我认为系统不知道之前必须加载服务共享，当我介绍AuthService时出现问题依赖于StoreService和BackendConnectorService。我怎么能够修复我的包之间的这个问题？我尝试使用meta对象系统js，但它似乎没有工作

Answer 1

我在AuthService文件中发现了我从中导入的问题 '@ app / shared'创建了一个循环引用。

系统js依赖性加载顺序

1 个答案: