angular - 将 systemjs-builder 与 gulp 一起使用时提供程序错误

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 生成的文件时，尽管设置了提供程序，但我们的一项服务出现了提供程序错误。

我的应用程序组件：

@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"
    ]
}

我的应用模块：

@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 { }