angular - gulp で systemjs-builder を使用する場合のプロバイダー エラー

Question

angular 2アプリを本番用にバンドルしようとしています。開発では、Visual Studio の typescript コンパイラ (tsconfig.json の「outFile」パラメータを使用) によって生成されたファイルを使用し、System.js でモジュールをロードします。本番環境では、gulp によって生成されたファイルを使用したいと考えています。

@if (HtmlHelpers.IsDebug())
{
    <script src="app/app.js"></script>
    <script>
        System
        .import('main')
        .catch(function (err) {
            console.error(err);
            var elem = document.getElementById("layoutLoader");
            elem.parentElement.removeChild(elem);
        })
    </script>
}
else
{
   <script src="public/dist/js/app.min.js"></script>
}

開発モードではすべて問題ありませんが、gulp によって生成されたファイルを使用している場合、プロバイダーが設定されているにもかかわらず、サービスの 1 つでプロバイダー エラーが発生します。

私の appCompnent :

@Component({
    selector: 'App',
    providers: [
        PluginRechercheAgentService,
        PluginCalendrierService,
        RechercheAgentService
    ],
    template: `
                <HomeComponent></HomeComponent>
                <LoaderComponent></LoaderComponent>
              `
})
export class AppComponent {
    constructor(
        private rechercheAgentServiceTest: RechercheAgentService
        ,private $service: $service
        , private rechercheAgentService: PluginRechercheAgentService
    ) {
        console.log("AppComponent");
}

このサービスはエラーを生成しません:

export class PluginRechercheAgentService {
    private _instance: PluginRechercheAgent;
    get getInstance(): PluginRechercheAgent { return this._instance; }

    constructor(
        public $service: Service,
        public referenceService: ReferenceService,
        public rechercheAgentService: RechercheAgentService,
        public broadCaster: Broadcaster
    ) {
 console.log("PluginRechercheAgentService");
}

例外「エラー: RechercheAgentService のプロバイダーがありません!」をトリガーする私のサービス:

@Injectable()
export class PluginCalendrierService {
    private _instance: PluginCalendrier;
    get getInstance(): PluginCalendrier { return this._instance; }
    //public rechercheAgentService: RechercheAgentService;

    constructor(
        public $service: Service,
        public rechercheAgentService: RechercheAgentService,
        public calendrierService: CalendrierService,
        public referenceService: ReferenceService,
        public broadCaster: Broadcaster
    ) {
        console.log("PluginCalendrierService");
}

これは私の一気の仕事です：

gulp.task('bundle:js', function () {
    var builder = new sysBuilder('', './systemjs.config.js');
    return builder.bundle('app/main.js', 'public/dist/js/app.min.js', { sourceMaps: true, lowResSourceMaps: false })
      .catch(function (err) {
          console.error('>>> [systemjs-builder] Bundling failed'.bold.green, err);
      });
});

私のtsconfig：

 {    
 "compilerOptions": {
        "target": "es5",
        "module": "system",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false
        //,"outFile": "app/app.js"
    },
    "compileOnSave": true,
    "exclude": [
        "node_modules",
        "public",
        "wwwroot"
    ]
}

私のAppModule：

@NgModule({
    declarations: [
        AppComponent,
        BaseComponent,
        HomeComponent,
        LoaderComponent,
    ],
    imports: [
        BrowserModule,
        CalendrierModule,
        RechercheAgentModule,
    ],
    bootstrap: [AppComponent],
    exports: [  ]
})
export class AppModule { }

カレンダーモジュール:

const myDeclarations = [
    CalendrierComponent,
    IndexComponent,
    DisplayComponent,
    EditComponent,
    CreateComponent
];

const myImports = [
    SharedModule,
];

const myExports = myDeclarations.concat(myImports as any);

@NgModule({
    declarations: myDeclarations,
    imports: myImports,
    providers: [
        CalendrierService,
        Broadcaster
    ],
    exports: myExports
})
export class CalendrierModule { }

RechercheAgentモジュール:

const myDeclarations = [
    RechercheAgentComponent,
    IndexComponentRechercheAgent,
    DisplayComponentRechercheAgent
    //EditComponent
];

const myImports = [
    SharedModule,
];

const myExports = myDeclarations.concat(myImports as any);

@NgModule({
    declarations: myDeclarations,
    imports: myImports,
    providers: [
        Broadcaster
    ],
    exports: myExports
})
export class RechercheAgentModule { }

共有モジュール:

const myDeclarations = [
    ngInitDirective,
    NgIncludeComposant, NgIncludeTemplate,
    widgetTitleDirective,
    fileUploadDirective,
    timePicker,
    FileUploadFullDirective,
    TrustHtml,
    TrustStyle,
    FilterPipe,
    FileImgPipe,
    DateInputComponent,
    ModalComposant,
    autoCompleteDirective,
    tagInput, FormControlDirective,
    planningDirective,
    profilActionDirective,
    DateRangePicker,
    NombrePipe
];

const baseImports= [
    CommonModule,
    FormsModule,
    HttpModule,
    BootstrapModalModule,
    CKEditorModule,
    CalendarModule,
    ScheduleModule,
    FileUploadModule,
    MultiselectDropdownModule,
    ChartsModule,
];

const myImports = baseImports.concat([ModalModule.forRoot()] as any);

const myExports = myDeclarations.concat(baseImports as any).concat([ModalModule] as any);

@NgModule({
    declarations: myDeclarations,
    imports: myImports,
    providers: [
        { provide: Window, useValue: window },
        Broadcaster,
        SERVICE_PROVIDERS,
        CLIENT_PROVIDERS,
        ReferenceService,
        { provide: ErrorHandler, useClass: ExceptionHandlerService },
        PluginBase,
    ],
    entryComponents: [ModalComposant],
    exports: myExports as any[]
})
export class SharedModule { }