-System js Abhängigkeit Ladereihenfolge

Question

Ich bekomme diese Fehlermeldung, wenn ich versuche, die AuthService in dieser Komponente zu injizieren: Es können nicht alle Parameter für AppHeaderComponent beheben: (Router, 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) { } 
} 

Ich habe zwei interne Module erstellt @ app/geteilt, welche die Komponenten und @ app/Dienstleistungen enthält, die die Dienste enthält, @ app/shared auf die Dienste abhängig ist. Ich erwähne, dass AppHeaderComponent in @ app/shared

Mein System js Config wie dieses

(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); 

sieht gespeichert ist, ich nehme an, dass das System nicht weiß, dass Dienste geladen werden muss, bevor geteilt , Das Problem trat auf, als ich den AuthService einführte, der von StoreService und BackendConnectorService abhängig ist. Wie kann ich dieses Problem zwischen meinen Paketen beheben? Ich habe versucht, mit Meta-Objekt auf System js aber es scheint nicht

Answer 1

ich das Problem, das ich von einen Import hatte in AuthService Datei gefunden zu arbeiten ‚@ app/shared‘, die einen zirkulären Verweis erstellt.