Provider error when using systemjs-builder with gulp

62 views Asked by At

I'm trying to bundle my angular 2 app for production. In developpement we are using the file produce by the typescript compiler of Visual Studio (by using the "outFile" parameter of tsconfig.json) and load the module with System.js. In production we want to use the file procudes by 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>
}

In developpement mode everything is fine but when we are using the file produces by gulp we have a provider error for one of our service although the provider is set.

My 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");
}

This service produces no error:

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");
}

My service that triggers the exception "Error: No provider for 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");
}

This is my gulp task:

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

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

My AppModule :

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

CalendrierModule :

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

RechercheAgentModule:

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

SharedModule:

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

There are 0 answers