2

I am searching for a way to let two angular 2 apps communicate with each other. I found that I should probably make a shared service.

My main.ts 

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { LoginComponent } from './login.component';
import { ShoppingListComponent } from './shopping-list.component';

bootstrap(LoginComponent);
bootstrap(ShoppingListComponent);

I have made a service user.service.ts

export class UserService {
  authenticated: boolean;
  constructor() { }

  setAuthenticated(authenticated) {
    this.authenticated = authenticated
  }

  isAutheticated() {
    return this.authenticated;
  }
}

Is there a way to share this service between both components?

SOLUTION

I found another way to do it with a factory:

main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { bind } from '@angular/core';
import { LoginComponent } from './login.component';
import { ShoppingListComponent } from './shopping-list.component';
import { UserService } from './services/user.service';
import { UserServiceFactory } from './factories/UserServiceFactory';

bootstrap(LoginComponent,[bind(UserService).toFactory(UserServiceFactory)]);
bootstrap(ShoppingListComponent,[bind(UserService).toFactory(UserServiceFactory)]);

UserServiceFactory.ts

import { UserService } from '../services/user.service';

var sdInstance = null;

export function UserServiceFactory() {
   if(sdInstance == null) {
        sdInstance = new UserService();
   }

   return sdInstance;
}

UPDATE

As said in the comments bind() is deprecated.

main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { provide } from '@angular/core';
import { LoginComponent } from './login.component';
import { ShoppingListComponent } from './shopping-list.component';
import { UserService } from './services/user.service';
import { UserServiceFactory } from './factories/UserServiceFactory';

bootstrap(LoginComponent, [provide(UserService, {useFactory:UserServiceFactory})]);
bootstrap(ShoppingListComponent, [provide(UserService, {useFactory:UserServiceFactory})]);
david.carm
  • 329
  • 4
  • 13

1 Answers1

1

The short answer is you can't.

That being said you can share an instance and use it when bootstrapping both components.

Here is a sample:

var service = new SharedService();

bootstrap(LoginComponent, [
  provide(SharedService, { useValue: service })
]);
bootstrap(ShoppingListComponent, [
  provide(SharedService, { useValue: service })
]);
Thierry Templier
  • 198,364
  • 44
  • 396
  • 360
  • 1
    Thanks for the answer, this really worked for me. After some searching on the internet I found an answer similar to yours. Instead of creating the instance you can make a factory instead and use the bind function: https://kbyte.snowpenguin.org/portal/en/2015/10/29/angular2-single-service-multiple-apps/ Cheers! – david.carm Jun 03 '16 at 11:34
  • You're welcome! Note that the `bind` function is deprecated in favor of the `provide` one ;-) but you can still implement the factory approach! – Thierry Templier Jun 03 '16 at 11:40