服务被多次构建

Question

我有一个针对Azure AD进行身份验证的服务，然后调用WS来获取该用户的角色。我希望该服务作为整个应用程序中引用的单例，但我注意到每次构建新组件时，服务也是如此。

Main.browser.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { decorateModuleRef } from './app/environment';
import { bootloader } from '@angularclass/hmr';
import { AppModule } from './app';

export function main(): Promise<any> {
  return platformBrowserDynamic()
.bootstrapModule(AppModule)
.then(decorateModuleRef)
.catch(err => console.error(err));
}

bootloader(main);

app.module.ts

import { NgModule, ApplicationRef } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { SharedModule } from './shared.module';
import { ErrorHandler } from '@angular/core';
import { ENV_PROVIDERS } from './environment';
import { ROUTES } from './app.routes';
import { App } from './app.component';
import { APP_RESOLVER_PROVIDERS } from './app.resolver';
import { AppState, InteralStateType } from './app.service';
import { AppConfig } from './app.config';
import { ErrorComponent } from './error/error.component';
import { AuthGuard } from './authentication/authentication.guard';
import { GlobalExceptionHandler } from './app.error.ts';

//This is the service that I am having issues with
import { AuthContext } from './authentication/auth-context.service';
/////////////////////////////////////

const APP_PROVIDERS = [
    ...APP_RESOLVER_PROVIDERS,
    AppState,
    AppConfig,
    AuthGuard,
    AuthContext
];

type StoreType = {
    state: InteralStateType,
    restoreInputValues: () => void,
    disposeOldHosts: () => void
};

@NgModule({
    bootstrap: [
        App
    ],
    declarations: [
        App,
        ErrorComponent
    ],
    imports: [ // import Angular's modules
        BrowserModule,
        FormsModule,
        HttpModule,
        RouterModule.forRoot(ROUTES, { useHash: true }),
        SharedModule.forRoot()
    ],
    providers: [ // expose our Services and Providers into Angular's     dependency injection
        ENV_PROVIDERS,
        APP_PROVIDERS,
        { provide: ErrorHandler, useClass: GlobalExceptionHandler }
    ]
})
export class AppModule {
    constructor(public appRef: ApplicationRef, public appState: AppState) {                }
}

app.component.ts

import { Injectable } from '@angular/core'
import { Component, ViewEncapsulation } from '@angular/core';
import { AppState } from './app.service';
import { AuthContext } from './authentication/auth-context.service';

@Component({
    selector: 'app',
    encapsulation: ViewEncapsulation.None,
    styleUrls: [
        './scss/application.scss'
    ],
    template: `<router-outlet></router-outlet>`
})
@Injectable()
export class App {
    authContext: AuthContext;
    constructor(
        public appState: AppState, ctx: AuthContext) {
        this.authContext = ctx;
        this.authContext.handleWindowCallback();
    }

    ngOnInit() {
    }
}

auth-context.service.ts - 服务我是单身人士

import { Injectable } from '@angular/core'
import { Observable } from 'rxjs/Observable'
import { Observer } from 'rxjs/Observer'
import { Http, Headers, Response, RequestOptions } from '@angular/http'
import { AdalService, AuthHttp, OAuthData } from 'ng2-adal/services';
import { User } from '../users/user';
import { UserInfo } from './UserInfo';
import { Role } from '../users/role';
@Injectable()
export class AuthContext {
private loginUrl = '/api/login';  // URL to web api
userDetail: User;
public userInfo: UserInfo
constructor(private adalService: AdalService, private authHttp: AuthHttp) {
    if (this.userInfo === undefined) {
        this.userInfo = new UserInfo();
    }
    this.adalService.init(this.adalConfig);
    this.adalService.handleWindowCallback();
    if (this.adalService.userInfo.isAuthenticated && this.userInfo.userDetails === undefined) {
        this.userInfo.isAuthenticated = this.adalService.userInfo.isAuthenticated;
    }
}

public handleWindowCallback() {
    this.adalService.handleWindowCallback();
}

private get adalConfig(): any {
    return {
    };
}

login() {
    this.adalService.login();
}
logOut() {
    this.adalService.logOut();
}
}

最后是应用程序的子组件，它为我的服务触发构造函数。

import { Component, ViewEncapsulation } from '@angular/core';
import { AuthContext } from './../authentication/auth-context.service';


@Component({
    selector: 'users',
    templateUrl: './users.template.html',
    encapsulation: ViewEncapsulation.None,
    styleUrls: ['./users.style.scss'],
})
export class UsersComponent {
constructor(config: AppConfig,
    private ctx: AuthContext,
) {
    ctx.handleWindowCallback();
}

我知道我在引导中做错了什么，但是我已经完成了我可以找到T的所有演练。任何人都能看到任何内容？