{"action":"created","issue":{"url":"https://api.github.com/repos/angular/angular/issues/8012","repository_url":"https://api.github.com/repos/angular/angular","labels_url":"https://api.github.com/repos/angular/angular/issues/8012/labels{/name}","comments_url":"https://api.github.com/repos/angular/angular/issues/8012/comments","events_url":"https://api.github.com/repos/angular/angular/issues/8012/events","html_url":"https://github.com/angular/angular/issues/8012","id":147548627,"number":8012,"title":"LifeCycle calls are not called on router navigation.","user":{"login":"jcdalton2201","id":1924003,"avatar_url":"https://avatars.githubusercontent.com/u/1924003?v=3","gravatar_id":"","url":"https://api.github.com/users/jcdalton2201","html_url":"https://github.com/jcdalton2201","followers_url":"https://api.github.com/users/jcdalton2201/followers","following_url":"https://api.github.com/users/jcdalton2201/following{/other_user}","gists_url":"https://api.github.com/users/jcdalton2201/gists{/gist_id}","starred_url":"https://api.github.com/users/jcdalton2201/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jcdalton2201/subscriptions","organizations_url":"https://api.github.com/users/jcdalton2201/orgs","repos_url":"https://api.github.com/users/jcdalton2201/repos","events_url":"https://api.github.com/users/jcdalton2201/events{/privacy}","received_events_url":"https://api.github.com/users/jcdalton2201/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":28,"created_at":"2016-04-11T20:40:03Z","updated_at":"2016-09-06T15:54:28Z","closed_at":"2016-04-12T14:55:22Z","body":"**IMPORTANT**: This repository's issues are reserved for feature requests and bug reports. Do not submit support requests here, see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question. \r\n\r\n\r\n**Steps to reproduce and a minimal demo of the problem**\r\nwe are using beta 14 with babel compile. when we navigate from one path to a second path the component lifecycle is not being called. if anything happens on the compoent then the ngOnInit will be called.\r\n\r\ncode pased below.\r\n\r\n_What steps should we try in your demo to see the problem?_\r\n\r\n**Current behavior**\r\nclick on the task links, the routerOnActivate will be called but the ngOnInit will not be called. when we click on the back button then the ngOnInit will be called.\r\n\r\n**Expected/desired behavior**\r\nngOnInit should be called when we navigate to the component.\r\n\r\n**Other information**\r\nmain.js\r\n```javascript\r\nimport 'angular2-polyfills';\r\nimport 'reflect-metadata';\r\nimport 'babel-polyfill';\r\nimport {bootstrap}    from 'angular2/platform/browser';\r\nimport {routeTestComponent} from './app.component';\r\nimport {ROUTER_PROVIDERS} from 'angular2/router';\r\nbootstrap(routeTestComponent, [ROUTER_PROVIDERS]);\r\n```\r\napp.component.js\r\n```javascript\r\nimport {Component} from 'angular2/core';\r\nimport {ROUTER_DIRECTIVES,RouteConfig} from 'angular2/router';\r\nimport {Dashboard} from './components/dashboard/dashboard.component';\r\nimport {About} from './components/about/about.component';\r\nimport {Tasks} from './components/tasks/tasks.component';\r\n@Component({\r\n  selector: 'route-test',\r\n  template: `\r\n  <h1>App</h1>\r\n   <a [routerLink]=\"['/Dashboard']\" class=\"link\">Dashboard</a>\r\n   <a [routerLink]=\"['/About']\" class=\"link\">About</a>\r\n   <a [routerLink]=\"['/Tasks']\" class=\"link\">Tasks</a>\r\n    <router-outlet></router-outlet>\r\n  `,\r\n  directives: [ROUTER_DIRECTIVES]\r\n})\r\n@RouteConfig([\r\n  {path: '/', component: Dashboard, name: 'Dashboard'},\r\n  {path: '/about', component: About, name: 'About'},\r\n  {path: '/tasks/...', component: Tasks, name: 'Tasks'}\r\n\r\n])\r\nexport class routeTestComponent { }\r\n```\r\ncomponents/dashboard\r\n```javascript\r\nimport {Component} from 'angular2/core';\r\n@Component({\r\n  selector: 'dashboard',\r\n  template: '<h1>Dashboard App</h1>',\r\n  directives: [],\r\n  inputs:[],\r\n  outputs:[],\r\n  pipes:[]\r\n})\r\n\r\nexport class Dashboard { }\r\n```\r\ncomponents/about\r\n```javascript\r\nimport {Component} from 'angular2/core';\r\nimport {Router} from 'angular2/router';\r\n@Component({\r\n  selector: 'about',\r\n  template: `\r\n  <h2>About</h2>\r\n  <button (click)=\"goBack()\">Go Back</button>\r\n\r\n  `,\r\n  directives: [],\r\n  inputs:[],\r\n  outputs:[],\r\n  pipes:[]\r\n})\r\n\r\nexport class About {\r\n  from;\r\n  constructor(route:Router){\r\n    this.router = route;\r\n  }\r\n  routerOnActivate(to, from) {\r\n    this.from = from;\r\n    console.log('About: ', to, from);\r\n  }\r\n  \r\n  goBack() {\r\n    console.log(this.from);\r\n    this.router.navigateByInstruction(this.from);\r\n  }\r\n }\r\n```\r\ncompoents/tasks/task.component.js\r\n```javascript\r\nimport {Component} from 'angular2/core';\r\nimport {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';\r\nimport {TasksList} from './tasks-list.component';\r\n@Component({\r\n  selector: 'tasks',\r\n  template: `\r\n  <h2>Tasks</h2>\r\n  <router-outlet></router-outlet>\r\n\r\n  `,\r\n  directives: [ROUTER_DIRECTIVES],\r\n  inputs:[],\r\n  outputs:[],\r\n  pipes:[]\r\n})\r\n@RouteConfig([\r\n  {path: '/list', component: TasksList, name: 'List', useAsDefault: true}\r\n\r\n])\r\nexport class Tasks {\r\n  routerOnActivate(to, from) {\r\n    console.log('Tasks: ', to, from);\r\n    this.render();\r\n  }\r\n  render() { console.log('render fired');}\r\n }\r\n```\r\ntasks/tasks-list.component.js\r\n```javascript\r\nimport {Component} from 'angular2/core';\r\nimport {ROUTER_DIRECTIVES, Router} from 'angular2/router';\r\n@Component({\r\n  selector: 'tasks-list',\r\n  template: `\r\n  <h3>Task-List</h3>\r\n  <button (click)=\"goBack()\">Go Back</button>\r\n  `,\r\n  directives: [ROUTER_DIRECTIVES],\r\n  inputs:[],\r\n  outputs:[],\r\n  pipes:[]\r\n})\r\n\r\nexport class TasksList {\r\n  task = {id : 1}\r\n\r\n  from: any;\r\n\r\n  constructor(router: Router) {\r\n    this.router = router;\r\n    console.log('constructor task-list');\r\n  }\r\n\r\n  routerOnActivate(to, from) {\r\n    console.log('Task-List: ', to, from);\r\n  }\r\n  ngOnChanges(){\r\n    console.log('list changes');\r\n  }\r\n  ngOnInit(){\r\n    console.log('here');\r\n  }\r\n\r\n  goBack() {\r\n    console.log(this.from);\r\n    this.router.navigateByInstruction(this.from);\r\n  }\r\n }\r\n```\r\nindex.html\r\n```html\r\n<!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <base href=\"/\" />\r\n    <meta charset=\"utf-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n    <title>Ng2</title>\r\n    <link rel=\"stylesheet\" href=\"css/main.css\">\r\n  </head>\r\n  <body>\r\n    <route-test>Loading...</route-test>\r\n  <script src=\"main.js\"></script>\r\n</body>\r\n</html>\r\n\r\n```"},"comment":{"url":"https://api.github.com/repos/angular/angular/issues/comments/244997377","html_url":"https://github.com/angular/angular/issues/8012#issuecomment-244997377","issue_url":"https://api.github.com/repos/angular/angular/issues/8012","id":244997377,"user":{"login":"max0x7ba","id":765202,"avatar_url":"https://avatars.githubusercontent.com/u/765202?v=3","gravatar_id":"","url":"https://api.github.com/users/max0x7ba","html_url":"https://github.com/max0x7ba","followers_url":"https://api.github.com/users/max0x7ba/followers","following_url":"https://api.github.com/users/max0x7ba/following{/other_user}","gists_url":"https://api.github.com/users/max0x7ba/gists{/gist_id}","starred_url":"https://api.github.com/users/max0x7ba/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/max0x7ba/subscriptions","organizations_url":"https://api.github.com/users/max0x7ba/orgs","repos_url":"https://api.github.com/users/max0x7ba/repos","events_url":"https://api.github.com/users/max0x7ba/events{/privacy}","received_events_url":"https://api.github.com/users/max0x7ba/received_events","type":"User","site_admin":false},"created_at":"2016-09-06T15:54:27Z","updated_at":"2016-09-06T15:54:27Z","body":"@brandonroberts That would require me hosting plunker on my local machine, would it not?\r\n\r\nIt turns out that `localhost` resolves to an IPv6 address, whereas `127.0.0.1` resolves to IPv4. \r\n\r\nNot sure if Angular2 supports IPv6.\r\n\r\n\r\n\r\n"}}
{"actor":{"display_login":"max0x7ba"}}