Angular2 router : Changing route doesn't load the component for first time

[devin6391]

I am changing the route of angular2 application from '/' to '/xyz'. For 'xyz' I have made a component named XYZComponent. This XYZComponent implements a hook for router lifecycle named "CanActivate". In this hook I am changing the title of the page for new route.
@CanActivate((next, prev) => {
document.title = "mysite | xyz"
return true;
})
Then I implement OnInit for this component and call the method "ngOnInit()". In this method I am calling the server to give me some data. This data is stored in a variable named xyzData, which is binded to the template. My template is:

<div class="xyzComp">
 <p>{{xyzData.msg}}</p>
</div>

OnInit is:

ngOnInit(){
    console.log("xyz component init");
    this._myRestfulService.getXyz()
        .subscribe(data => {
            console.log("success",data);
            this.xyzData = data;
        }, err => {
            this.xyzData = {msg:"cannot get data"};
            console.log("error", err);
        });
}

Changing the route is done by calling _route.navigate(["XYZ"]) from the click of a button named xyzBtn, which is present in the header of my app. The header is constant for all the routes.
Problem is that when I click on xyzBtn for first time it calls only whatever written in @CanActivate decorator of XYZComponent. Next time when I click xyzBtn,@CanActivate is not called but this time ngOnInit() is called.
Please help me on this. This problem occurs only when I deploy my code on server. The deployment server is NGINX server. On nginx server we have configured to ignore frontend routes.
However my code works perfectly well on development server which is a npm module named lite-server.

[zoechi]

call the method "ngOnInit()".

sounds weird. I think this requires at least a Plunker that allows to reproduce.

GitHub issues are for bug reports and feature requests.
For support questions please use other channels like the ones listed in CONTRIBUTING - Got a Question or Problem?

[devin6391]

I think its a bug of Angular2. It might be crashing while deciding which lifecycle hook to address first - router or component. The documentation of CanActivate lifecycle hook of router is also not very clear on how it interacts with lifecycle of a component.

[zoechi]

Would probably be easy to know if you would provide a Plunker that demonstrates what you're doing.

[vaudy]

I think ngOnInit is called for components only

[devin6391]

Plunker : https://plnkr.co/edit/E4HNXEjaIP7th77UE4dK?p=preview

[brandonroberts]

@devin6391 that plunker doesn't work: http://plnkr.co/edit/oZzjAH34WJ1R14z0Xtbl?p=preview

[devin6391]

One more thing, I am making a bundle file from systemjs builder before deploying. Could that raise issue?

[brandonroberts]

It shouldn't. Usually if your lifecycle hooks aren't being called until you manually trigger some action, your polyfills aren't setup correctly. Are you including the angular2 polyfills in a script tag in your index.html on deployment?

[zoechi]

See also http://stackoverflow.com/questions/36767520/angular2-router-changing-route-doesnt-load-the-component-for-first-time (I updated the Plunker to make it work https://plnkr.co/edit/YwPXR5YyIy3OFkOnBlZo?p=preview)

[devin6391]

Hi, I have also done some debugging. The areas where I find Angular2 incompatible are:

1. Cannot do minification. We have to use .dev version. This need to be fixed.
2. The doc of Angular2 doesn't explain how routing lifecycle affect component lifecycle and vice versa.

Few problems are there with system js also. Although this is not the place to post SystemJs issues but there is some kind of problem when system js bundles up the angular files in module.

I think with time these problems will get resolved, and we are definitely waiting for a stable version-1 of angular2

[zoechi]

For 1) see https://github.com/angular/angular/search?q=minified&state=open&type=Issues&utf8=%E2%9C%93

[ribizli]

I had the same problem, and after ca. 4 hours investigation I've found that the problem was caused by systemjs/dist/system-polyfills.js. I removed this dependency and it works now at least in Chrome.

I need to add one more details: the component's template was using *ngIf, so it was something related to change detection I assume.

Here is a plunkr to reproduce: http://plnkr.co/edit/X8cXgf9GhfLZlVmo2fAK (you have to click the route link twice to get the component rendered)
Just comment the system-polyfills in index.html to get it work...
Works also if the *ngIf is removed from the components.

[jpleclerc]

@ribizli I removed system-polyfills.js and it solved the problem for me too. ty!

[JSMike]

Thx, I couldn't figure out why my component lifecycle wasn't starting, removing the system-polyfill.js worked for me as well.

[mohyeid]

Removing system-polyfills.js worked for me

[after-ephemera]

I am having this same issue, but using webpack and angular2-universal. Any ideas of what could be happening?

[kwgainey]

+1 for removing system-polyfills.js. Was driving me crazy for a while. Anyone experience side-effects of removing system-polyfills.js, though?

[vsavkin]

It seems the issue was opened before the router rewrite. And it doesn't look like the issue still makes sense. I'm closing it. Please reopen it if you think it still makes sense.

[hari30OJ]

@azjkjensen Can you share your solution if you found one. I am using webpack for building.
Any help would be appreciated. Thanks!!

[after-ephemera]

@hari30OJ unfortunately I'm no longer a part of the project and I can't remember what the fix was. I'm sorry.

[Velunce]

Cut it to another folder and then cut back to src folder......
It will works.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}