Angular 6：没有服务和传递信息来配置模块的单例

Question

My app has this structure:

src
 |-- modules
 |  |-- app2-module
 |  
 |-- shared-common
 |  |-- services
 |      |-- rest.services.ts
 |
 |-- app.module.ts

The rest.services has to be configurable.

If it called in app2 ( app2-module ) the get methods use, for example, rest/app2-api/getCompanyList ; if it called in app1 ( app.module.ts ) the get methods use, for example, rest/app1-api/getCompanyList .

So I create a configurable shared module in this way

export default interface SharedCommonConfig {
    createApiUrl(api: string): string;
}

export const SharedCommonConfigService): = new InjectionToken<SharedCommonConfig>('SharedCommonConfig');

export class SharedCommonModule {
    static forRoot(config: SharedCommonConfig): ModuleWithProviders {
        return {
            ngModule: SharedCommonModule 
            providers: [
                {
                    provide: SharedCommonConfigService): Service,
                    useValue: config
                },
                RestService
            ],
        };
    }
}

and I pass the configuration in app.module.ts

@NgModule({

    imports: [
        BrowserModule,
        App2Module,
        SharedCommonModule .forRoot({
            createApiUrl: (api: string) => {    
                return `/rest/app1-app/${api}`;
            }
        })
    ],

})

export class AppModule implements OnInit {}

and in App2Module

@NgModule({

    imports: [
        BrowserModule,
         SharedCommonModule .forRoot({
            createApiUrl: (api: string) => {    
                return `/rest/app2-app/${api}`;
            }
        })
    ],

})

export class App2Module implements OnInit {}

App2Module is showed on screen when the user navigate to url http://example.com/#/app2/ and in this case the rest service has to call the api with /rest/app2-app as a prefix; but it's not work because read only the configuration in app.module.ts.

Is it possibile don't use the rest.service as singleton?

Answer 1

The action of importing the shared service in the root app.module in this way will make it a singleton.

To avoid this, you would need to separate app1.module and app2.module and then register the service in both of those and not register it in the main app.module.

Therefore, you would need:

@NgModule({

    imports: [
        BrowserModule,
        App1Module,
        App2Module
    ],

})
export class AppModule implements OnInit {}

... and then separate App1Module and App2Module both registering the shared module as you have done for App2Module:

App 1:

@NgModule({

    imports: [
        BrowserModule,
        SharedCommonModule .forRoot({
            createApiUrl: (api: string) => {    
                return `/rest/app1-app/${api}`;
            }
        })
    ],

})
export class App1Module implements OnInit {}

App 2:

@NgModule({

    imports: [
        BrowserModule,
        SharedCommonModule .forRoot({
            createApiUrl: (api: string) => {    
                return `/rest/app2-app/${api}`;
            }
        })
    ],

})
export class App2Module implements OnInit {}