Angular2 service not being injected as singleton

Question

I have the following service defined:

@Injectable()
export class UserService {

private _users: User[] = []
private _currentUser:User;

///Creates an instance of the Angular2 Http Service 
 constructor(private _http: Http) {console.log("in the constructor"; }

This is called from the login component:

@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
 })
export class LoginComponent implements OnInit {
returnUrl: string;

constructor(private _userService: UserService,
          private route: ActivatedRoute,
          private router: Router)   { }

 validateUser(username: string, password: string): boolean {
  var loggedOnUser = this._userService.checkLogin(username, password);
  ...//check if logged on
 this.router.navigate([this.returnUrl]);

  return true;
 }

However, when there is a successful login, it redirects to the home route and the authentication guard starts up a new instance of the user service, which because it is a new instance returns undefined for the authenticated user

@Injectable()
export class AuthGuard implements CanActivate {

constructor(private router: Router, private _userService: UserService) { }

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {

    if (this._userService.getAuthenticatedUser()) //is undefined?????
    {
        return true;
    }

    // not logged in so redirect to login page with the return url
    this.router.navigate(['/login'], { queryParams: { returnUrl: state.url    }});
    return false;
}
}

My module is declared like so:

@NgModule({
 declarations: [
AppComponent,
LoginComponent,
HomeComponent,
ManageUsersComponent,
StandingDataComponent
 ],
 imports: [
BrowserModule,
FormsModule,
HttpModule,
AppRoutingModule
 ],
providers: [AuthGuard,UserService],
bootstrap: [AppComponent]
})
export class AppModule { }

My routing class is the following:

const appRoutes: Routes = [
{path: '', component: HomeComponent, canActivate:[AuthGuard]},    
{ path: 'login', component: LoginComponent },
{path: 'home', 
component:HomeComponent, canActivate:[AuthGuard],
children: [{path: 'manageusers', component: ManageUsersComponent, outlet: 'innerPage'},
            {path: 'standingdata', component: StandingDataComponent, outlet: 'innerPage'}]
}, 
// otherwise redirect to home
{ path: '**', redirectTo: '' }];

@NgModule({
    imports: [RouterModule.forRoot(appRoutes)],

exports: [RouterModule]
})
export class AppRoutingModule { }

The user service constructor code is firing both when the login page is hit, and when a successful authentication occurs.

My understanding is that this kind of problem happens when UserService is defined in both the component and the module, but in my case the module is the only place where this is defined.

The question is XY problem, and the assumption that it is not a singleton leads the answers the wrong way. From the code above, it cannot be anything but singleton. If you have doubts about that, please, check this by exposing _userService to global variables and checking if they are equal, you're the only person who can do this. The question needs MCVE. — Estus Flask
I thought the fact that the code in the constructor fired more than once indicated that it wasn't a singleton?? — jazza1000
If you have "in the constructor" only in one place, then yes. The fact that you have syntax error in constructor(private _http: Http) {console.log("in the constructor"; } suggests that real code differs from the code you've posted in some way. MCVE is needed for the question to not be considered offtopic. A plunk of a fiddle may help. From what I know of A2 DI, it is not possible to have different instances if you don't have providers: [UserService] somewhere else. — Estus Flask

jazza1000 jazza1000 · Accepted Answer · 2017-02-07T11:26:39

The solution was found in the following stackoverflow:

Angular2 router.navigate refresh page

This led me to test it in Internet Explorer, which worked OK (it was not working in Chrome)

It turned out that the entire page was refreshing when the following line was executed:

this.router.navigate([this.returnUrl]);

Which was causing the user service to reload again, because without a type on the button, Chrome's default action was to treat the button click as a submit.

The fix was to add the tag type="button" to the login button in the html

<button type="button" class="btn btn-primary"(click)="validateUser(username, password)">Login</button>

It now works in all browsers.

Angular2 service not being injected as singleton

2 Answers