{"action":"created","issue":{"url":"https://api.github.com/repos/angular/angular/issues/7125","repository_url":"https://api.github.com/repos/angular/angular","labels_url":"https://api.github.com/repos/angular/angular/issues/7125/labels{/name}","comments_url":"https://api.github.com/repos/angular/angular/issues/7125/comments","events_url":"https://api.github.com/repos/angular/angular/issues/7125/events","html_url":"https://github.com/angular/angular/issues/7125","id":134309007,"number":7125,"title":"Router: Order of imports breaks the app","user":{"login":"AlmeroSteyn","id":5063473,"avatar_url":"https://avatars.githubusercontent.com/u/5063473?v=3","gravatar_id":"","url":"https://api.github.com/users/AlmeroSteyn","html_url":"https://github.com/AlmeroSteyn","followers_url":"https://api.github.com/users/AlmeroSteyn/followers","following_url":"https://api.github.com/users/AlmeroSteyn/following{/other_user}","gists_url":"https://api.github.com/users/AlmeroSteyn/gists{/gist_id}","starred_url":"https://api.github.com/users/AlmeroSteyn/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/AlmeroSteyn/subscriptions","organizations_url":"https://api.github.com/users/AlmeroSteyn/orgs","repos_url":"https://api.github.com/users/AlmeroSteyn/repos","events_url":"https://api.github.com/users/AlmeroSteyn/events{/privacy}","received_events_url":"https://api.github.com/users/AlmeroSteyn/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2016-02-17T15:22:36Z","updated_at":"2016-02-17T16:50:37Z","closed_at":null,"body":"When defining a basic route config the order of importing router components seems to matter. Found this at AngularClass at NG-NL. Igor debugged the application and saw this happening.\r\n\r\nUsing 0.19.8 version of SystemJS.\r\n\r\n**With the following import sequence it fails:**\r\n\r\nimport {Component} from 'angular2/core';\r\nimport {ROUTER_PROVIDERS} from 'angular2/router';\r\nimport {bootstrap} from 'angular2/platform/browser';\r\nimport {ContactHeaderComponent} from './components/contact-header/contact-header-component';\r\nimport {ContactsListComponent} from './components/contacts-list/contacts-list-component';\r\nimport {ContactsService} from \"./common/contacts-service\";\r\nimport {RouteConfig} from \"angular2/router\";\r\nimport {ROUTER_DIRECTIVES} from \"angular2/router\";\r\nimport {ContactDetailComponent} from \"./components/contact-detail/contact-detail-component\";\r\n\r\n@Component({\r\n  selector: 'contacts-app',\r\n  template: `<contact-header></contact-header>\r\n             <router-outlet></router-outlet>\r\n             `,\r\n  directives: [ContactHeaderComponent, ROUTER_DIRECTIVES]\r\n})\r\n@RouteConfig([\r\n  {\r\n    path: '/',\r\n    component: ContactsListComponent,\r\n    name: 'ContactsList'\r\n  }  ,\r\n  {\r\n    path: '/contacts',\r\n    component: ContactDetailComponent,\r\n    name: 'ContactDetail'\r\n  }\r\n])\r\nexport class ContactsApp {\r\n}\r\n\r\nbootstrap(ContactsApp, [ContactsService, ROUTER_PROVIDERS]);\r\n\r\n\r\n**If defined as follows it works:**\r\n\r\nimport {ROUTER_PROVIDERS, ROUTER_DIRECTIVES, RouteConfig} from 'angular2/router';\r\n\r\nimport {Component} from 'angular2/core';\r\nimport {bootstrap} from 'angular2/platform/browser';\r\nimport {ContactHeaderComponent} from './components/contact-header/contact-header-component';\r\nimport {ContactsListComponent} from './components/contacts-list/contacts-list-component';\r\nimport {ContactsService} from \"./common/contacts-service\";\r\nimport {ContactDetailComponent} from \"./components/contact-detail/contact-detail-component\";\r\n\r\n@Component({\r\n  selector: 'contacts-app',\r\n  template: `<contact-header></contact-header>\r\n             <router-outlet></router-outlet>\r\n             `,\r\n  directives: [ContactHeaderComponent, ROUTER_DIRECTIVES]\r\n})\r\n@RouteConfig([\r\n  {\r\n    path: '/',\r\n    component: ContactsListComponent,\r\n    name: 'ContactsList'\r\n  }  ,\r\n  {\r\n    path: '/contacts',\r\n    component: ContactDetailComponent,\r\n    name: 'ContactDetail'\r\n  }\r\n])\r\nexport class ContactsApp {\r\n}\r\n\r\nbootstrap(ContactsApp, [ContactsService, ROUTER_PROVIDERS]);\r\n"},"comment":{"url":"https://api.github.com/repos/angular/angular/issues/comments/185293771","html_url":"https://github.com/angular/angular/issues/7125#issuecomment-185293771","issue_url":"https://api.github.com/repos/angular/angular/issues/7125","id":185293771,"user":{"login":"CaptainCodeman","id":304910,"avatar_url":"https://avatars.githubusercontent.com/u/304910?v=3","gravatar_id":"","url":"https://api.github.com/users/CaptainCodeman","html_url":"https://github.com/CaptainCodeman","followers_url":"https://api.github.com/users/CaptainCodeman/followers","following_url":"https://api.github.com/users/CaptainCodeman/following{/other_user}","gists_url":"https://api.github.com/users/CaptainCodeman/gists{/gist_id}","starred_url":"https://api.github.com/users/CaptainCodeman/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/CaptainCodeman/subscriptions","organizations_url":"https://api.github.com/users/CaptainCodeman/orgs","repos_url":"https://api.github.com/users/CaptainCodeman/repos","events_url":"https://api.github.com/users/CaptainCodeman/events{/privacy}","received_events_url":"https://api.github.com/users/CaptainCodeman/received_events","type":"User","site_admin":false},"created_at":"2016-02-17T16:50:37Z","updated_at":"2016-02-17T16:50:37Z","body":"I remember when software development seemed to involve less prayer, magic and reliance on planets being aligned correctly for things to work.This is making me feel old."}}