гибридное угловое приложение использует один и тот же экземпляр службы

Question

Как я могу использовать один и тот же экземпляр сервиса в angularjs и angularjs?

Мой сервис :

    export class WhiteLabelService{
        favicon = null;
        headerProp:HeaderProperties = {logo: null, backgroundColor: null, fontColor: null};
        constructor(){

        }

        updateField(field, value){
            this.headerProp[field] = value;
        }
    }

использовать в angularjs :

    import { WhiteLabelService } from './white-label/whiteLabel.service';
    export default angular
        .module('kn-components', myModuleNames)
        .service('WhiteLabelService', WhiteLabelService)
...


class WhiteLabelCtrl{
    constructor(WhiteLabelService){
        this.wlService = WhiteLabelService;
        this.headerprop = WhiteLabelService.headerProp;
    }

    test(){
        this.wlService.updateField('logo', 'coucouc');
    }
}


const whiteLabel = {
    template: require('./white-label.html'),
    controller: WhiteLabelCtrl,
    controllerAs: 'wlCtrl'
};

используется в угловой

import {WhiteLabelService} from "./components/white-label/whiteLabel.service";
@NgModule({
    ...
    providers:[
        WhiteLabelService
    ]
})

@Component({
    selector: 'color-picker',
    template: `<input [(colorPicker)]="color" [style.background]="color" (colorPickerChange)="onChangeColor($event);color=$event"/><span>{{color}}</span>"`,
    providers: [WhiteLabelService]
})
export class ColorPickerComponent implements OnInit {
    public color: string = '#2889e9';
    @Input() property: string;
    @Input() field: string;
    constructor(
        private el: ElementRef,
        public vcRef: ViewContainerRef,
        private cpService: ColorPickerService,
        private wlService: WhiteLabelService,
    ) { }
public onChangeColor(color: string) {
        this.wlService.updateField(this.field, color);
        // this.property[this.field] = color;

        // return this.cpService.rgbaToCmyk(rgba);
    }
}