Angular2路由器：更改路由不会首次加载组件

Question

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.

Update - It works well on other npm based servers like http-server.

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

Update3 - I am using a bundle file in server. Building the bundle through systemjs builder. Could that be an issue?

Answer 1

https://github.com/angular/angular/issues/8166

The issue is resolved by removing the system-polyfill

Answer 2

There is no specific answer to this problem. Its just that both Angular2 and SystemJs are in beta. You cannot use minified files of angular2 or its dependent modules. Also you cannot combine your system js modules with non systemJs javascript files.

So if you have say - nonsys.js, sys1.js and sys2.js files in your project. You cannot bundle all three of them and serve them from server. But you can combine sys1.js and sys2.js to become sys-all.js and then serve 2 different files from your server to browser.

Sorry guys, it isn't just Angular2 problem, but its system js problem.