Observed value does not refresh after page refresh when using a router

Question

I am using Angular2 RC5 and @angular/router with a simple router-outlet element. I have an Observable that works fine in the view, but it doesn't work when you refresh the page (F5 or CTRL-F5). I have this in Chrome (the latter) and IE11 (and probably in other browsers). I currently have a workaround, but I don’t understand why my changes are not reflected in the view automatically.

The project is quite large, so it tries to minimize it here:

In MyService.ts

 @Injectable() export class MyService { initialValue: MyObject = new MyObject(); // actually I read this from local storage... _information: BehaviorSubject<MyObject> = new BehaviorSubject(this.initialValue); get obsMyObj(): Observable<MyObject> { return this._information.asObservable(); } myServiceFunction() { return this.http.get(`api/myUrl`) .map(this.extractMyInfo); } extractMyInfo = (res: Response): MyObject { let body = res.json(); var myObject = new MyObject().mapAllProperties(body); this._information.next(myObject); return myObject; } } 

In MyComponent.ts:

 @Component({ selector: '[header]', templateUrl: 'app.component.header.html' }) export class HeaderComponent implements OnInit { constructor(private myService: MyService) { } myObject: MyObject = new MyObject(); ngOnInit() { this.myService.obsMyObj.subscribe( (data) => { this.myObject = data; }); } } 

In MyView.html

 <div> <img [src]="myObject?.picture"> <!-- this always works, I see the picture after page refresh --> <p>{{myObject?.prop1 }}</p> <!-- this does not work after page refresh --> </div> 

Another component makes the actual call to the myServiceFunction service, so I created an observable to map it to MyComponent.ts .

Instead of using this.myObject = data and assigning properties manually, it works to refresh every page ...

 this.myObject.prop1 = data.prop1; this.myObject.prop2 = data.prop1; 

When debugging, the subscription method is called with the correct data for the initial state and page refresh.

I tried to bind the observable directly, instead of using an object in my component.

I tried using an asynchronous channel.

Answer 1

Perhaps your problem is related to ngOnInit your MyComponent . Could you subscribe to this.myService.obsMyObj() instead of this.myService.obsMyObj ?

 ngOnInit() { this.myService.obsMyObj().subscribe( (data) => { this.myObject = data; }); }