Angular 4：在 NgModule 提供者数组中动态添加提供者

Question

应用背景：我的应用是使用 ASP.net MVC(.net framework 4.6) 和几个 Angular 4 mini SPA 构建的

SPA 之一使用这种方法来引导组件。简而言之，这个 SPA 可以引导由一个 Angular 应用程序管理的多个组件。

问题只有当 html 视图中存在组件时，我才想在 providers 数组中添加一个提供者（如果这是正确的词，则动态添加）。希望大家帮帮忙？

示例我想在视图中加载/存在{ provide: APP_BASE_HREF, useValue: '/shoppingbasket/my' }时添加到 providers 数组AddProductToShoppingBasketComponent中

代码

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ComponentFactoryResolver, ApplicationRef, Type } from '@angular/core';
import { HTTP_INTERCEPTORS } from "@angular/common/http";
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
//import { APP_BASE_HREF } from "@angular/common";

import { ToastrModule } from "ngx-toastr";
import { NgProgressModule, NgProgressInterceptor } from 'ngx-progressbar';

import { ShoppingModule } from './shopping/shopping.module';
import { SharedModule } from './shared/shared.module';
import { CheckoutModule } from './checkout/checkout.module';

import { AppRoutingModule } from './app-routing.module';


import { AppComponent } from './app.component';
import { ShoppingBasketComponent } from "./shopping/shopping-basket.component";
import { AddProductToShoppingBasketComponent } from './shopping/add-product-to-shopping-basket.component';

const components = [AppComponent, AddProductToShoppingBasketComponent, ShoppingBasketComponent];

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        SharedModule,
        CheckoutModule,
        AppRoutingModule,
        BrowserModule,
        ShoppingModule,
        NgProgressModule,
        BrowserAnimationsModule,
        ToastrModule.forRoot({
            timeOut: 5000,
            positionClass: 'toast-bottom-right',
            preventDuplicates: true,
            closeButton: true
        })
    ],
    providers: [
        //{ provide: APP_BASE_HREF, useValue: '/shoppingbasket/my' },
        { provide: HTTP_INTERCEPTORS, useClass: NgProgressInterceptor, multi: true }
    ],
    entryComponents: components
})
export class AppModule {
    //Reference: https://blog.novatec-gmbh.de/angular-2-in-a-multi-page-application/
    constructor(private resolver: ComponentFactoryResolver) { }
    ngDoBootstrap(appRef: ApplicationRef) {
        components.forEach((componentDef: Type<{}>) => {
            const factory = this.resolver.resolveComponentFactory(componentDef);
            if (document.querySelector(factory.selector)) {
                appRef.bootstrap(factory);
            }
        });
    }
}